{this.props.value} の役割

Question

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

class App extends Component{
data = [
  "this is list sample",
  "これはリストサンプルです",
  "配列をリストに変換します"
];

msgStyle={
  fontSize:"20pt",
  color:"#900",
  margin:"20px 0px",
  padding:"5px",
}

constructor(props){
  super(props);
  this.state={
    list:this.data
  };
}
render(){
  return<div>
    <h1>React</h1>
    <h2 style={this.msgStyle}>show list</h2>
    <List title="サンプル・リスト" data={this.data} />
  </div>;
}
}
class List extends Component {
  number = 1;
  title = {
    fontSize:"20px",
    fontWeight:"bold",
    color:"blue",
  };
  render(){
    let data = this.props.data;
    return(
      <div>
        <p style={this.title}>{this.props.title}</p>
         <ul>
           {data.map((item) =>
            <Item number={this.number++} value={item}
            key={this.number} />
            )}
         </ul>
      </div>
    );
  }
}

class Item extends Component{
  li={
    listStyleType:"square",
    fontSize:"16pt",
    color:"#06",
    margin:"0px",
    padding:"0px",
  }
  num = {
    fontWeight:"bold",
    color:"red"
  }
  render(){
    return(
      <li style={this.li}>
       <span style={this.num}>[{this.props.data}]</span>
       {this.props.value}
      </li>
    );
  }
}
export default App;

最後の{this.props.value}の役割がいまいちピンと来ません。

valueは今まで宣言して来なかったのです、急に出て来てどのような役割を担ってるのですか？

表示内容はdata[
]
の中身が表示されました。

Answer 1

propsというのは、親要素から与えられる値を指します。今、ItemコンポーネントはListから使われており、

<Item number={this.number++} value={item}
            key={this.number} />

となっているので、this.props.valueは{item}を指しています。