I am trying to make a API call and return the JSON object in an unordered list in Component A. Once I make the unordered list, I need to make the name property a link which will take me to component B and show the data related to the name property. How can I achieve this?
Component A (Home.js)
import React , { useState} from "react";
import axios from 'axios';
import Display from './Display'
function Home(){
const [info, setInfo] = useState([]);
const [orgName, setOrg] = useState([]);
const [dataToMove, setDataToMove] = useState([]);
let signal = axios.CancelToken.source();
function handleChange(event) {
setOrg(event.target.value);
}
function handleClick(event) {
axios.get(`https:/api.github.com/orgs/${orgName}/repos`, {
cancelToken: signal.token,
})
.then(res => {
const info = res.data;
setInfo(info);
setDataToMove(info);
console.log(info);
}).catch(err => {
console.log(err);
});
}
// < Display parentToChild={this.state.dataToMove}>
//|Image: <img src={dummy.owner.avatar_url} alt="" />
const parentToChild = () => {
let data ={};
data = dataToMove;
}
let getInfo = info;
return (
<div>
<span>Enter User Id</span>
<input type="text" onChange={handleChange}/>
<button onClick={handleClick}>Get Posts By User</button>
<button onClick={parentToChild} > Go to Display Page</button>
<ul>
{
getInfo.map(dummy =>
(
<li key={dummy.id} >
Name: {dummy.name}
|| Fork: {dummy.fork ? "true" : "false"} || Owner: {dummy.owner.login}
|| Avatar: {} || Open Issues: {dummy.open_issues_count}}
</li>
))
}
</ul>
</div>
);
}
export default Home;
Component B (Display.js)
function Display({parentToChild}){
const info =[];
return (
<div>
<span>See Data Below</span>
<ul>
{
info.map(dummy =>
(
<li key={dummy.id} >
Name: {dummy.name}
|| Fork: {dummy.fork ? "true" : "false"} || Owner: {dummy.owner.login}
|| Avatar: {} || Open Issues: {dummy.open_issues_count}} ||Image: <img src={dummy.owner.avatar_url} alt=""/>
</li>
))
}
</ul>
<p> {parentToChild}</p>
</div>
);
}
export default Display;
Navigation.js
import React from "react";
import { NavLink } from "react-router-dom";
function Navigation() {
return (
<div className="navigation">
<nav className="navbar navbar-expand navbar-dark bg-dark">
<div className="container">
<NavLink className="navbar-brand" to="/">
React Multi-Page Website
</NavLink>
<div>
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<NavLink className="nav-link" to="/">
Home
<span className="sr-only">(current)</span>
</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/about">
Display Data
</NavLink>
</li>
</ul>
</div>
</div>
</nav>
</div>
);
}
export default Navigation;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import {Navigation, Display, Home }from './Components';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router>
<Navigation />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/Display" element={<Display />} />
</Routes>
</Router>
</React.StrictMode>
);
