How can I pass fetched data between components?

Question

I am fetching some data in my App component and mapping through it to display names. I also have a counter component which besides the counts, I want to render the user names from the data fetched in App. I wish to know how do I pass the data's user names as props to the counter component so that it displays the names there as well?

Here is my App:

function App() {
  const {data, isLoading} = useAsync({promiseFn: loadUsers})
  if (isLoading)
    return "Loading..."
  if (data)

    return (<div className="container">
      {
        data.map(user => (
          <div key={user.username} className="row">
            <div class="col-md-8">
              <div class="card-body">
                <h2>{user.name}</h2>  // Need this to also display in button component
                <Counter id={user.name}/>
              </div>

My Counter Component's return :

  return (
    <div>
      <b>Would you like to work with (user.name data from app) </b> &nbsp; <i onClick={handleIncrement} class="far fa-thumbs-up" style={clickStyle}> Yes!</i>
      <br/>
      <h><b>{count}</b> have said Yes!</h>
    </div>
  );
}

Have you read react's tutorial https://reactjs.org/docs/components-and-props.html? I could give you straight answer, but seriously, read their docu. — Dan Macak, Jul 31 '21 at 05:03
You already pass `user.name` as the `id` prop, so.... access `props.id`. — Drew Reese, Jul 31 '21 at 05:04
Does this answer your question? [How to pass data from child component to its parent in ReactJS?](https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs) — Amruth, Jul 31 '21 at 05:08
Syntax wise I am not getting it. The App is my parent component, so I should be passing from parent to child — Jabba the Hutt, Jul 31 '21 at 05:26

Majid M. · Accepted Answer · 2021-07-31T05:53:05.063

In your App component you're sending the user's name as id into Counter.When you're sending a variable from parent component into another one, you can access it via props in child component. Also you need to pass props into child components. In addition You should change the user.name to props.id. Based on your code which you have attached in stackbiltz. Here's the correct code:

function Likes(props) {
  const [count, setCount] = useState(0);
  const KEY = `count-${props.id}`;
  const clickStyle = {
    color: '#2197ba',
    cursor: 'pointer'
  };

  useEffect(() => {
    const parsedCount = Number(localStorage.getItem(KEY) || 0);
    setCount(parsedCount);
  }, []);

  useEffect(() => {
    localStorage.setItem(KEY, count);
  }, [count]);

  const handleIncrement = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <b>Would you like to work with counter {props.id} </b> &nbsp;{' '}
      <i onClick={handleIncrement} class="far fa-thumbs-up" style={clickStyle}>
        {' '}
        Yes!
      </i>
      <br />
      <h>
        <b>{count}</b> have said Yes!
      </h>
    </div>
  );
}

Please refer to this document for more information about props: https://reactjs.org/docs/components-and-props.html

Could you take a look at this: https://stackblitz.com/edit/react-bfrfxa?file=src%2FApp.js The Counter id set to user name is for each counter to have a unique value. — Jabba the Hutt, Jul 31 '21 at 05:38
@JabbatheHutt Updated the code. Please see this link: https://stackblitz.com/edit/react-b8reny?file=src%2Fcomponents%2FCounter.js — Majid M., Jul 31 '21 at 05:43

score 0 · Answer 2 · answered Jul 31 '21 at 05:43

You can also destructure your props inside Counter component, so that you don't need to write props.id.

function Counter({id}) {  //here I destructured it
      return (
        <div>
          <b>Would you like to work with {id} data from app </b> &nbsp; <i onClick={handleIncrement} class="far fa-thumbs-up" style={clickStyle}> Yes!</i>
          <br/>
          <h><b>{count}</b> have said Yes!</h>
        </div>
      );
    }

How can I pass fetched data between components?

2 Answers2