Question 72690 in Reactjs Question posted in
The new location for the React Documentation can be found here.

React JS-JSX Function Parameters Always Undefined – Reactjs

I’m doing a simple react tutorial and I can’t seem to get my list to render. Here’s my page:

function Item({name, isPacked} ){

return <li className="item">{name}</li>; }



export default function PackingList(){
return(
    <section>
        <h1>Sally Ride's Packing List</h1>
        <ul>
            <Item>
                isPacked={true}
                name="Space suit"
            </Item>
            <Item>
                isPacked={false}
                name="Helmet with a golden leaf"
            </Item>
            <Item>
                isPacked={false}
                name="Photo of Tam"
            </Item>
        </ul>
    </section>
);}

My index:

div>
   <PackingList></PackingList>
</div>

I get an empty list. I put a breakpoint inside Item and both parameters are undefined. What am I doing wrong?

Tags:

2

Answers


  1. 0

    When give props to child component, the props should inside the html tag element.

    An example from your question

    export default function PackingList() {
return(
    <section>
        <h1>Sally Ride's Packing List</h1>
        <ul>
            <Item 
                isPacked={true} 
                name="Space suit"
            >
            </Item>
            <Item   
                isPacked={false}
                name="Helmet with a golden leaf"
            >
            </Item>
            <Item 
                isPacked={false}
                name="Photo of Tam"
            >
            </Item>
        </ul>
    </section>
);
}
    Login or Signup to reply.
  2. 0

    There are two ways of passing props from parent to child component
    1 – destructuring the data

    function Item({name, isPacked} ){
    return (
        <li className="item">{name}</li>
    )
}
function Parent() {
    return (
        <Item
            name={'test'}
            isPacked={true}
        />
    )
}

    2 – taking from props – inside props goes everything you passed to the component and the children is the one wrapped inside. ‘test’ (in this case, but can be wherever component you want)

    function Item(props){
    return (
        <li className="item">{props.children}</li>
    )
}
function Parent() {
    return (
        <Item
           //all handlers or setters for state
           isPacked={true}
        >
           test
        </Item>
    )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search