CODEWITHSUNDEEP
javascriptreactjs
user11304504
user11304504

Reputation:

'Property of value undefined' - how to fix undefined props?

I'm trying to pass an array with numbers to a method that should list the numbers on my localhost 'website'. But for some reason the browser prompts that the property 'props.value' is undefined, even though I pass the value in the NumberList function.

I can manage to get it to work, if I get rid of ItemList function, and instead creates the

  • code in the NumberList function, but I want to split the function into two functions.

    import React, { Component } from "react";
import "./App.css";

function ListItem({props}) {
return <li>{props.value}</li>;
}

function NumberList({numbers}) {
const listItems = numbers.map((number) =>
    <ListItem key={number.toString()} 
            value={number} />
);
return (
    <ul>
        {listItems}
    </ul>
);
}

// function NumberList({ numbers }) {
//     const listItems = numbers.map((number) =>
//         <li key={number.toString()}
//         > {number}</li>
//     );
//     return listItems;
// }


function NumberTable({ numbers }) {
const tableItems = numbers.map((number) =>
    <table key={number.toString()}>
    <tbody>
        <tr>
            <td>{number}</td>
        </tr>
        </tbody>
    </table>
);
return tableItems;
}

function ListDemo(props) {
return (
    <div>
        <h2>All numbers passed in via props</h2>
        <NumberList numbers={props.numbers} />
    </div>
);
}

export default class App extends React.Component {
state = { numbers: [1, 2, 3] }
render() {
    return <ListDemo numbers={this.state.numbers} />;
}
}

    Expected result: listed numbers on the localhost webpage Actual result: 'Property 'props.value' is undefined'

    Upvotes: 0

    Views: 224

    Answers (2)

    ApplePearPerson
    ApplePearPerson

    Reputation: 4439

    You're destructing the props in function ListItem({props}) { which means that props will actually have the value of whatever props.props is (undefined). Either put value instead of props or don't destruct it.

    Upvotes: 0

    xDreamCoding
    xDreamCoding

    Reputation: 1694

    You are using destructuring in the parameters of your ListItem function: {props} use just props instead.

    Upvotes: 2

    Related Questions