ReactJs - Как передать конкретный идентификатор элемента из одного компонента в другой компонент

Question

Привет, я новичок в реагировании на J, и это может быть очень простой вопрос, но я застрял с этим, может ли кто-нибудь дать решение для этого.

Мне нужно передать идентификатор из Ownerlist.js в Ownerinformation.jsНа данный момент я жестко закодирован как 4, но мне нужно, чтобы он отправлялся динамически.

Компонент представления списка - OwnersList.js Деталь элемента списка - Ownerinformation.js

1) OwnerList.js

import React, { Component } from "react";
import axios from 'axios';
import { Grid,Row,Col,Table,Glyphicon } from "react-bootstrap";
import { Form, Button, Message } from "semantic-ui-react";
import './ownerinformation.css';
class OwnersList extends Component {   

    state = {  
        owners: []
    };  

    componentDidMount(){  

        fetch('http://localhost:9090/api/owners')      
        .then(response => response.json())
        .then(data => this.setState({ owners:data }));
     }
     //editowner = (data) => this.props.editowner(data).then(() => this.props.history.push('/dashboard'));
     ownerinformation = (props) => {        
        this.props.history.push('/ownerinformation');
     }  

   downloadpdf = (props) => {        
    window.open('http://localhost:9090/api/owners/download/pdf?lastname=%%')
     }

    render(){

        return(
        <div>  
            <Grid>
            <Row className="downloadpdf">
                <Col sm={6}>Page 1/3 - found 22 Owners</Col>
                <Col  onClick={() => this.downloadpdf()} sm={6}><Glyphicon glyph="download" />Download As PDF</Col>
            </Row> 
      </Grid>            
            <Table striped bordered condensed hover>
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>City</th>
      <th>Telephone</th>
      <th>Email</th>
      <th>Owner Info</th>
    </tr>
  </thead>
  <tbody>     

                  {this.state.owners.map(owner =><tr><td>{owner.firstname}</td><td>{owner.address}</td><td>{owner.city}</td><td>{owner.telephone}</td><td>{owner.email}</td><td value={owner.id} onClick={() => this.ownerinformation(owner.id)}><Button primary>User Information</Button>  </td></tr>)}

    </tbody>
  </Table>;



        </div>
    )}

}

export default  OwnersList;

Цитата

2) OwnerInformation.js

import React, { Component } from "react";
import axios from 'axios';
import { Grid , Row , Table , Col , Clearfix  } from "react-bootstrap";
import './ownerinformation.css';
import { Form, Button, Message } from "semantic-ui-react";
class OwnerInformation extends Component {   

    state = {          
        owners: [],
        ownerInfo:{},
        petBasedOnOwner:{}
    };  

    componentDidMount(){ 

        fetch('http://localhost:9090/api/owners')      
        .then(response => response.json())
        .then(data => this.setState({ owners:data }));

        fetch('http://localhost:9090/api/owners/4')      
        .then(response => response.json())
        .then(data => this.setState({ ownerInfo:data }));

     }
     editowner = (props) => {        
        this.props.history.push('/editowner');
     }  

 render(){

        return(
        <div>             
            <Grid>
  <Row>
    <Col sm={6}>
    <h2> Owner Information</h2> 
    <ul className="owner-info-ul">   
               <li className="owner-info"><span className="labelinfo">Name:</span>{this.state.ownerInfo.firstname}</li>
               <li className="owner-info"><span className="labelinfo">Address:</span>{this.state.ownerInfo.address}</li>
               <li className="owner-info"><span className="labelinfo">City:</span>{this.state.ownerInfo.city}</li>
               <li className="owner-info"><span className="labelinfo">Telephone:</span>{this.state.ownerInfo.telephone}</li>
               <li className="owner-info"><span className="labelinfo">Email:</span>{this.state.ownerInfo.email}</li>
            </ul>
            <Button primary onClick={() => this.editowner(1)}>Edit User</Button>   
    </Col>
    <Col sm={6}>
    <h2> Pets and Visits</h2> 
    {this.state.owners.map(owner => {
               owner.pets.filter(item => {if (item.owner_id === 1)                   
                   <ul>
                       <li className="petslist">PetName: {item.name}</li>
                       <li className="petslist">Date Of Birth: {item.birthdate}</li>
                       <li className="petslist">Type: {item.type_id}</li>
                   </ul>
               })

            })}

                   <br></br>

    </Col>
  </Row> 
            </Grid>




        </div>
    )}

}

export default  OwnerInformation;

Answer 1

Вы можете попробовать передать данные как

OwnerList.js

this.props.history.push({
  pathname: '/ownerInformation',
  search: '?query=ownerInformation',
  state: { data: id }
})

OwnerInformation.js

this.props.location.state.data

Answer 2

метод map () имеет несколько параметров , но нам важны текущий элемент и индекс.

Вы можете сделать следующее, чтобы передать индекс вдочерний компонент:

{this.state.owners.map((owner, index) => <OwnerInformation index={index} />)}