'props' is not defined no-undef

Question

I'm a newbie in react ,sorry if I don't post in a good place In my script I just want to pass a array in a coponant in other coponant (sorry for my english) My code

 class ListItem extends React.Component { constructor(props) { super(props) } render() { // Correct! There is no need to specify the key here: return <li>{props.value}</li>; } } class NumberList extends React.Component { constructor(props) { super(props) } render() { const numbers = props.numbers; const listItems = numbers.map((number) => // Correct! Key should be specified inside the array. <ListItem key={number.toString()} value={number} /> ); return ( <ul> {listItems} </ul> ); } } // ======================================== const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') );

Answer 1

In class component you excess props though the class instance:

// not props.numbers
const numbers = this.props.numbers;

---

class ListItem extends React.Component {
  render() {
    return <li>{this.props.value}</li>;
  }
}
class NumberList extends React.Component {
  render() {
    const numbers = this.props.numbers;
    const listItems = numbers.map((number) => (
      <ListItem key={number.toString()} value={number} />
    ));
    return <ul>{listItems}</ul>;
  }
}

Answer 2

Within the render() function of both components props is an instance variable. In order to get the props you need to do:

class ListItem extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <li>{this.props.value}</li>;
  }
}

You could even destructure your props:

class ListItem extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { value } = this.props;
    return <li>{value}</li>;
  }
}

Same goes with the other component. Also, one thing to note. You could use function components instead of class components and not need to have your props as an instance variable:

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

The above can replace your current implementation.

Answer 3

Thanks you so much !!! The two solutions are working :) but one question is it possible to pass an array like that class myComponantParent{ myArray[]

} Class myComponantChildren{ display myArray

} ? So to pass a array from one componant to an other componant without declared the array before ReactDom but declaring the array in the parent componant to display it en a children componant

Thanks for your help :)

Answer 4

You can pass variables from the parent component to the child component like so:

function ChildComponent({ array }) {
  if (!array || arr.length === 0) {
    return <p>No array was passed</p>
  }

  return (
    <ul>
      {array.map((value, index) => (
        <li key={index}>
          {value}
        </li>
      ))}
    </ul>
  )
}

function ParentComponent() {
  const arr = [1, 2, 3]
  return <ChildComponent array={arr} />
}