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

Question

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'

Answer 1

您正在ListItem函数的参数中使用解构： {props}仅使用props 。

Answer 2

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.