How to pass state/data from one component to another in React.js (riot api specifically)

Question

I am trying to pull information from one component's API call to then use that data in another API call in a separate component. However, I am unsure how to export and use the data from the first API call in the second component.

App.js

import './App.css';
import FetchMatch from './fetch-match/fetch.match';
import FetchPlayer from './fetch-player/fetch.player';

function App() {
  return (
    <div className="App">
        <h1>Hello world</h1>
        <FetchPlayer></FetchPlayer>
        <FetchMatch></FetchMatch>
        
    </div>
  );
}

export default App;

fetch.player then makes the first API call to get a users specific ID which will be used in the second API call too fetch that users match history.

fetch.player.js

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const FetchPlayer = () => {

  const [playerData, setPlayerData] = useState([]);
  
  const userName = 'users name';
  const userTagLine = '1234';
  const apiKey = '???';
  
  useEffect( () => {
    axios.get(`https://americas.api.riotgames.com/riot/account/v1/accounts/by-riot-id/${userName}/${userTagLine}?api_key=${apiKey}`)
    .then(response => {
      console.log(response.data)
      setPlayerData([response.data])
    })
    .catch(error => console.log(error))
  }, []);


  return (
    <div>
      {playerData.map( data => (
        <div>
          <p>{data.puuid}</p>
          <p>{data.gameName}#{data.tagLine}</p>
        </div>
      ))}
    </div>
    )
}

export default FetchPlayer;

not much here but just in case...

fetch.match.js

import React, { useState } from 'react';

// Somehow take in the puuid set in the state of fetch.player to make a second API call below
const FetchMatch = () => {

  const [matchData, setMatchData] = useState([]);

  return (
    <div>
      // players match list goes here
    </div>
    )
}

export default FetchMatch;

I am unsure if I should make a separate function instead which would allow me to create consts to handle both API calls in a single file. Or if there is a way to pass the state from fetch.player as a prop to fetch.match from App.js. I have tried to do the former but it either doesn't work or I am messing up the syntax (most likely this)

Answer 1

If you render both component parallelly in a parent component, they are called sibling components.

Data sharing in sibling components can be done by multiple ways (Redux, Context etc) but the easiest and simplest way (the most basic way without 3rd party API) involves the use of parent as a middle component.

First you create the state in the parent component and provide it as props to the child component which need the data from its sibling (in your case is FetchMatch).

import React from 'react';
import './App.css';
import FetchMatch from './fetch-match/fetch.match';
import FetchPlayer from './fetch-player/fetch.player';

function App() {
  const [data,setData] = React.useState();

  return (
    <div className="App">
        <h1>Hello world</h1>
        <FetchPlayer></FetchPlayer>
        <FetchMatch data={data} ></FetchMatch>
        
    </div>
  );
}

export default App;

Provide the function to setData as a props to the child component which will fetch the initial API (in your case is FetchPlayer)

<FetchPlayer onPlayerLoad={(data) => setData(data)} />

Then, in that child component when you finish calling the API and get the result, pass that result to the onPlayerLoad function which will call the setData function with the result as parameters. It will lead to state change and re-rendering of the second FetchMatch component feeding the props data with API results.

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const FetchPlayer = ({onPlayerLoad}) => {

  const [playerData, setPlayerData] = useState([]);
  
  const userName = 'users name';
  const userTagLine = '1234';
  const apiKey = '???';
  
  useEffect( () => {
    axios.get(`https://americas.api.riotgames.com/riot/account/v1/accounts/by-riot-id/${userName}/${userTagLine}?api_key=${apiKey}`)
    .then(response => {
      console.log(response.data)
      setPlayerData([response.data])
      onPlayerLoad(response.data)
    })
    .catch(error => console.log(error))
  }, []);

return <></>;

Coming to FetchMatch, you will have the data in its second rendering.

import React, { useState } from 'react';

// Somehow take in the puuid set in the state of fetch.player to make a second API call below
const FetchMatch = ({data}) => {

  const [matchData, setMatchData] = useState([]);

  //console.log(data);
  return (
    <div>
      // players match list goes here
    </div>
    )
}

export default FetchMatch;

Now, you can do whatever you want with the shared data in second component which in your case is trigger match API. 🎉