React setting Stateful variables in map function - reactjs

Question

I am trying to set up a react app where a list of buttons are displayed, the user can press a button and be taken to a page with information about a country. I am creating the buttons programmatically using a .map function. I am using a SQL database to store country names, and information about the countries, and then calling a flask route to pull the data into my react app. For that, I am using an async function.
This is the process that I would like to have happen:
I set up some stateful variables in my App.js main router component. I then pass as props my setState functions to my component with the buttons and the .map function. For each button, there is the option to set the state of the variables in the App.js component. I would then set the variables in App.js to the values associated with the button clicked. From there, I could pass those stateful variables to my country page component for display.
What actually happens:
I pass the props to my country component, expecting a country and country details to pass along with it, but I end up getting undefined. It looks like undefined might be the last element of the dataset, as I have gotten Zimbabwe as the result before. Here is my code for the App.js router:
export default function App() {
const [cname, setCName] = useState('')
const [pdf, setPdf] = useState('')
const [details, setDetails] = useState('')
return (
<div className="App">
<BrowserRouter>
{/* <Route exact path="/" component = { Home }/> */}
<Route path="/cia" component = {(props) => <CIALanding {...props} setCName={setCName} setPdf={setPdf} setDetails={setDetails}/>}/>
<Route path="/country" component={(props) => <Country {...props} setCName={setCName} details={details} cname={cname}/>}/>
<Route path="/countrypage" component={CountryPage}/>
</BrowserRouter>
</div>
);
}
Here is the code for my landing page (with the .map function)
export default function CIALanding(props) {
const [countriesList, setCountriesList] = useState([])
const getCountries = async () => {
const response = await fetch('http://127.0.0.1:5000/countries');
const data = await response.json();
setCountriesList(data['country_list'].map((country) => {return (
<Link to={{pathname:'/country',
}}>
<Country cname1={country[0]} details={country[2]} setCName={props.setCName}>{country[0]}</Country>
</Link>
)}))
}
useEffect(() => {
getCountries()
},[])
return (
<div>
{countriesList}
</div>
)
}
Here is my code for the Country Component
export default function Country(props) {
return (
<div>
{console.log(props.cname)}
<Button onClick={props.setCName(props.cname1)}>{props.cname1}</Button>
</div>
)
}
Thanks a lot for the help!

Answer 1

I will not exactly anwser to your question but I propose some refactoring and maybe that will solve your problem.
Firstly I will move fetching code to the App component, it will allow easier access to this data by components (I added some nice handling of fetching status change). Here you will render proper Routes only if data is fetched successfully.
const App = () => {
const [status, setStatus] = useState(null);
const [countries, setCountries] = useState([]);
const getCountries = async () => {
setStatus('loading');
try {
const response = await fetch('http://127.0.0.1:5000/countries');
const data = await response.json();
setCountriesList([...data['country_list']]);
setStatus('success')
} catch (error) {
setSatus('error');
}
}
useEffect(() => {
getCountries();
}, [])
if (!status || status === 'error') {
return <span>Loading data error</span>
}
if (status === 'loading') {
return <span>Loading...</span>
}
return (
<div className="App">
<BrowserRouter>
<Route path="/cia" component={(props) => <CIALanding {...props} countries={countries} />
<Route path="/country/:countryId" component={(props) => <Country {...props} countries={countries} />
</BrowserRouter>
</div>
);
}
Second thing - to display proper country page you don't need to set any data into state, only thing you need is to set route /country/:countryId and Links with proper paths where countryId can be unique country identyficator as number or code. With setup like this only data needed in component is array of countries and which country is loaded is decided by routing
Landing component will be nice and simple (you definitely shouldn't keep React components in state, only data)
const CIALanding = ({countries}) => (
<div>
{
countries.map(({countryName, countryId}) => (
<Link to={`/country/${countryId}`}>{countryName}</Link>
))
}
</div>
)
So now we have nice list of countries with proper links. And then country page will know which data to display by param countryId
const Country = ({match, countries}) => {
//match object is passed by Route to this component and inside we have params object with countryId
const {countryId} = match.params;
const country = countries.find(country => country.countryId === countryId);
if (country) {
return (
<div>
Show info about selected country
</div>
);
}
return (
<div>
Sorry, cannot find country with id {countryId}
</div>
)
}
And you can access proper country page by clicking on Link and additionally by entering path for example .../country/ENG in browser (I don't know your data structure so remeber to use correct data for countryId) ;)
Sorry if this don't resolve your problems but I hope it contains at least some nice ideas for refactoring ;)