Как показать одну запись за один раз, передав уникальный идентификатор каждой строки дочернему компоненту в REACT js

Question

У меня есть проект REACT js, в котором я показываю запись базы данных с использованием php API. Теперь пользователь входит в систему, нажимая кнопку «Показать все продукты» , запускает API, сохраняет все данные в массиве и отображает их на экране с помощью функции map () . Работает нормально. Таким образом, он может видеть таблицу со строками всех продуктов записи. Теперь перед каждой строкой продукта я отображаю кнопки "ПРОСМОТР", которые будут отображать детали этого конкретного продукта при нажатии на соответствующей кнопке .

Теперь на кнопке «ПРОСМОТР» с помощью функции карты я получаю SparePartID (извлекается из API) и отправляет извлеченный SparePartID в дочерний компонент, когда Нажата кнопка « VIEW ». как это:

    { this.state.spareParts.map(part => (<h5>

        <button className="btn btn-sm btn-success" onClick={this.switch}>
        View
        </button>
        {this.state.Ifshow  ? <News SparePartID={part.SparePartID} /> : null }

      </h5>))}

и onClick , функция вызывается, означает, что при нажатии кнопки " VIEW " будет показан дочерний компонент и будет проходить SparePartID вдоль него.

switch(e)
{
  e.preventDefault();
  this.setState({
    Ifshow: true
  });
}

ТЕПЕРЬ ПРОБЛЕМА ЕСТЬ: Когда я нажимаю кнопку «ПРОСМОТР» для одного продукта, он запускает дочерний компонент для всех строк продукта одновременно. может быть, это связано с функцией карты. Но есть ли другой способ отправить SparePartID дочернему компоненту при нажатии кнопки «Просмотр»? Я также пытался вызвать функцию onClick и передать SparePartID в качестве параметра, но он делает то же самое. вопрос заключается в том, чтобы использовать функцию карты, чтобы она вызывала компонент для всех продуктов даже одним щелчком мыши. ПОЖАЛУЙСТА, ПОМОГИТЕ МНЕ ЭТОМ .. Я так волнуюсь ... Спасибо!!! вот полный код ** (showAllParts.jsx): **

export default class ShowAllParts extends Component
{
  constructor(props) {
      super(props)
      this.state = {
        vendor: '',
        Ifshow: false,
          spareParts: []
      };

      this.show = this.show.bind(this);
      this.switch = this.switch.bind(this);

    }

switch(e)
{
  e.preventDefault();
  this.setState({
    Ifshow: true
  });
}




show(e) {

  const vid = this.props.VendorID;
console.log("mount of Child showAllParts");

    axios.get('http://localhost/Auth/api/show_parts.php?VendorID='+vid, {
    headers: {
     'Accept': 'application/json, text/plain, */*',
      'Content-Type': 'application/json'
     }} )
   .then(response =>
   {
   console.log(response.data.records);
   this.setState({
          spareParts :response.data.records
        });
   })
     .catch(error => {
     if (error) {
       console.log("Sorry Cannot Show products");
       console.log(error);
     }
       });
  }



  render()
  {
    const { classes, theme } = this.props;


    return (
<div>

<MiniDrawer ContactPerson={this.state.vendor.ContactPerson} />
<div>


<Row style={ {width: "103%"}}>
<Col md="12" lg="12" sm="12">

      <Table id="mytable" hover responsive className="table-outline mb-0 d-none d-md-table">
        <thead className="thead-light">
        <tr>

          <th > <h3> ID </h3> </th>
          <th className="text-center"> <h3> Product Name </h3></th>
          <th className="text-center"> <h3> Price </h3></th>
          <th className="text-center"> <h3> Description </h3></th>
          <th className="text-center"> <h3> Warranty </h3></th>
          <th> <h3> Status </h3> </th>
          <th> <h3> Action </h3> </th>
          <th> <h3> Option </h3> </th>

        </tr>
        </thead>
        <tbody>

        <tr>

        <td className="text-center">
    { this.state.spareParts.map(part => <h4>{part.SparePartID}</h4>)}
        </td>

        <td className="text-center">
        { this.state.spareParts.map(part => <h4>{part.Name}</h4>)}
        </td>

        <td className="text-center">
        { this.state.spareParts.map(part => <h4>{part.Price}</h4>)}

        </td>


        <td className="text-center">
        { this.state.spareParts.map(part => <h4>{part.SubCatPartID}</h4>)}

        </td>

        <td className="text-center">
        { this.state.spareParts.map(part => <h4>{part.VehicleID}</h4>)}
        </td>



        <td className="text-center">
        { this.state.spareParts.map(part => <h4>{part.Status}</h4>)}
        </td>



  <td className="text-center">
      { this.state.spareParts.map(part => (<h5>

        <button className="btn btn-sm btn-success" onClick={this.switch}>
        VIEW
        </button>

        {this.state.Ifshow  ? <News SparePartID={part.SparePartID} /> : null }


      </h5>))}
    </td>
</tr>
        </tbody>
      </Table>
 </Col> </Row>
</div>

<button onClick={this.show}  className="btn btn-lg btn-info"> Show ALL PRODUCTS
</button>

</div>



);
}
}

и дочерний Компонент News.jsx:

export default class News extends Component
  {

    constructor(props) {
        super(props)
        this.state = {
          onePart: '',

        };

        this.show = this.show.bind(this);
}


show(e){
      console.log("Showing one record of SparePartID: ");
  
      const pid = this.props.SparePartID;

        axios.get('http://localhost/Auth/api/show_one_part.php?SparePartID='+pid, {
        headers: {
         'Accept': 'application/json, text/plain, */*',
          'Content-Type': 'application/json'
         }} )
       .then(response =>
       {
       console.log(response.data);
       this.setState({
              onePart :response.data
            });
       })
         .catch(error => {
         if (error) {
           console.log("Sorry Cannot Show one single product");
           console.log(error);
         }  });
    }



  render()
  {

    return (
<div>

<button onClick={this.show}>
CLICK to view details of Product with ID: {this.props.SparePartID}
</button>


<div className="App">
<h3>
{this.state.onePart.Name}
{this.state.onePart.Status}

</h3>
 </div>

</div>

    )
  }
}

Вывод, когда я нажимаю кнопку просмотра 1 товара, он показывает дочерний компонент для всех товаров