Why undefined? React

i am just learning react using Andrew meed’s course.
what i am getting problem is -> in the keyOption property i am getting last value as ‘undefined’
i don’t know why ?

class Header extends React.Component{
  render(){
    console.log(this.props);
    return (
      <div>
      <h1>{this.props.title}</h1>
      <h2>{this.props.subtitle}</h2>
    </div>
    );
  }
}
class Option extends React.Component{
  render(){
    console.log(this.props.keyOption);
    return (
      <div>{this.props.keyOption}</div>
    );
  }
}

class Options extends React.Component{
  render(){
    // console.log(this.props)
    return (
      <div>
        {
          this.props.option.map((option)=>{
            // console.log(option);
            return <Option key={option} keyOption={option} />;
          })
        }
      <Option />
      <button>what should i do?</button>
    </div>
    );
  }
}
class IndecisionApp extends React.Component{
  render(){
    const subtitle="this is subtitle";
    const option = ["first","second","third"];
    return (
      <div>
        <Header title="Indecision App" subtitle={subtitle} /> 
        <h1>take it </h1>
        <p>how are you</p>
        <Options option={option}/>
      </div>
    );
  }
}
ReactDOM.render(<IndecisionApp />,document.getElementById('app'));

That extra div you are seeing is from the above line.

1 Like

ohhh shit that was silly
btw thanks @camperextraordinaire as always :smile: