display data based on pass value id - reactjs

Question

i want to display data based on its id. i have 2 page, app.js and display.js. in app.js i already display a table and clickable data to link to display.js. but i cant display data n display.js based on its id. i use API to get this all data and data in display.js is looping all data on result json and not only by id that i click on app.js.
can anyone helpme to pass the id from app.js to display.js and not loop data on display.js?
here's my code
App.js
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
errors: null,
isLoading: true
};
}
getData = async () => {
const option = {
url:api/url
method: 'POST',
headers: {
"Access-Control-Allow-Origin": "*"
},
data: {
"data": {
"data": "111111"
},
"encrypt": 0
}
};
axios(option)
.then(response => {
const tableData = response.data.data.map(post => {
const {id, name, type} = post;
return [
<Link to={'/display'}>{id}</Link>, //when i click this it link to display.js and in display.js only display data based on this id
<Link to={'/display'}>{name}</Link>,
<Link to={'/display'}>{type}</Link>
];
});
this.setState({
data: tableData,
isLoading: false
});
})
);
}
componentDidMount() {
this.getData();
}
render() {
const columns = ["ID", "Name", "Type"];
const options = {
filterType: "dropdown",
responsive: "scroll",
selectableRows:false
};
return (
<div>
<center><h3>Table</h3></center><br/>
{!isLoading ? (
<MUIDataTable
data={this.state.data}
columns={columns}
options={options}
/>)
: (
<p>Loading...</p>
)}
</div>
);
}
}
export default App
display.js
class App extends React.Component {
// State will apply to the posts object which is set to loading by default
constructor(props) {
super(props);
this.state = {
data: [],
isLoading: true,
errors: null
};
}
// Now we're going to make a request for data using axios
getData = async () => {
const option = {
url:api/url
method: 'POST',
headers: {
"Access-Control-Allow-Origin": "*"
},
data: {
"data": {
"data": "111111"
},
"encrypt": 0
}
};
axios(option)
.then(response => {
this.setState({
data: response.data.data,
isLoading: false,
});
console.log(response.data);
const data = JSON.parse(data);
})
);
}
componentDidMount() {
this.getData();
}
// Putting that data to use
render() {
const { isLoading, data} = this.state;
return (
<React.Fragment>
<h3>Data display</h3><br/>
<div>
{!isLoading ? (
data.map(post => {
const {id, name, age, type, gender} = post;
return (
//from API this data is looping and more than 1, i want to after click id from app.js it will link to this display.js page and only show data based on id
<div>
<Card>
<CardHeader color="info">
<h4 >Data </h4>
</CardHeader>
<CardBody>
<div><b>ID</b></div>
<div>{id}</div>
<div><b>Name</b>
<div>{name}</div>
<div><b>age</b></div>
<div>{age}</div>
<div><b>type</b></div>
<div >{type}</div>
<div><b>gender</b></div>
<div>{gender}</div>
</CardBody>
</Card>
<br/>
</div>
);
})
) : (
<p>Loading...</p>
)}
</div>
</React.Fragment>
);
}
}
export default App;
anyone can help to only show page display.js based on id i click in app.js?

Answer 1

You can pass the id within of the clicked row within the link child
<Link to={{
pathname: '/display',
state: {
data: post
}
}}></Link>
and in your display component you can get the id to send with the request
const { data } = this.props.location.data
and in your display component you'll get all the clicked row data and you can remove the loop from the render as well as the request