Element of array is defined in console.log, but not in return statement

Question

I am trying to access an element of a prop. I can access the element with a console.log, but not in a return.

function Viewer(props) {
// Step 1: Viewer receives a prop called "json".
    
const Footer = (props) => {
        console.log(props.json.lines[1]) // Step 3: This successfully logs the second element of the array.
        return (
            { props.json.lines[1] } // Step 4: "TypeError: props.json is undefined" (but it's not) 
        )
    }

    // Step 2: Viewer calls Footer, passing prop.json to Footer.
    return (
        <main>
            <Footer
                json={props.json}
            />
        </main>
    )
}

This code seems quite straightforward, but doesn't work. Even though console.loging the element words, trying to return the element yields TypeError: props.json is undefined.

Unrelated, but [defining a component inside a component is an anti-pattern](https://stackoverflow.com/a/59636503/1218980). — Emile Bergeron, Mar 26 '21 at 22:48
Thank you, Emile. I've posted the solution based on your comment below. — emzenophin, Mar 26 '21 at 23:19

score 1 · Answer 1 · answered Mar 26 '21 at 23:18

Emile's comment led to the solution. I solved the problem by:

Removing Footer from the main view.
Redeclaring Footer in a separate file.
Importing Footer back into the main view, and passing the main view's props to the newly imported Footer.

I don't know why this worked.

score 0 · Answer 2 · answered Mar 26 '21 at 23:05

0

Try to put some verification in this props variable:

return (
    <main>
        <Footer
            json={props.json && props.json}
        />
    </main>
)

answered Mar 26 '21 at 23:05

Gabriel

19
4

Thanks for the suggestion, but same error. – emzenophin Mar 26 '21 at 23:07

score 0 · Answer 3 · answered Mar 26 '21 at 23:11

I got a different error than the Type error you mentioned.

error: unknown: Unexpected token, expected "," (8:20)

   6 |         return (
   7 |             // Step 4: "TypeError: props.json is undefined" (but it's not) 
>  8 |              { props.json.lines[1] }
     |                     ^
   9 |         )
  10 |     }
  11 |

if you change { props.json.lines[1] } to <main>{ props.json.lines[1] }<main>, then you can see that json is defined.

Reasoning might be that the return from a component should be an react element object, but {props.json.lines[1]} is event not an object.

Element of array is defined in console.log, but not in return statement

3 Answers3