How to use state value in another js file

Question

I have a file named Card.js. It contains two states called status and view .

Every time a button is clicked, my status state changes & according to this state my card is hidden.

At the same time, each of my cards has a view state. This increases by 1 according to the click event.

src/components/Card.js


const Card = (props) => {
  const [status, setStatus] = useState(false);
  const [view, setView] = useState(0);

  const handleClick = () => {
    setStatus(!status);
    setView(view + 1);
  };

  return (
    <div>
      <Button onClick={handleClick}>{status ? "Show Component" : "Hide Component"}</Button>
      {status ? null : <div className="card">{props.children} </div>}
    </div>
  );
};
export default Card;

In my app.js file, I return the data in my JSON file with the map method, I print this data to my card component.

src/App.js


const App= () => {
  return (
      <div>
        {post.map((value, index) => {
          return (
            <Card key={index}>
           {// here I want to print the "view" state in my Card.js file.}
            </Card>
          );
        })}
      </div>
  );
};
export default App;

In App.js, I tried to create the view state using the useEffect hook, but every time I click the button, the view state of both my cards is updated at the same time. I don't want it to happen this way.

because my card component has "children" props and I want to show "view" state inside that children props. — Brandt, Aug 01 '22 at 00:54
I found this answer on stackoverflow that seems to answer your question: https://stackoverflow.com/a/46991539/11426731. — shadow-lad, Aug 02 '22 at 16:58

score 0 · Answer 1 · edited Aug 02 '22 at 16:31

0

You can pass the data in your card as props so that the data is available in your Card module.

{
  post.map((value, index) => {
      return (
        <Card key={index} status={false}>
       {// here I want to print the "view" state in my Card.js file.}
        </Card>
      );
  })
}

And in card module, pass the prop value to useState. I hope this will solve your problem.

const [status, setStatus] = useState(props.status);

edited Aug 02 '22 at 16:31

T. Nielsen

835
5
18

answered Aug 01 '22 at 00:59

Sumit kumar

1
1

I guess I didn't convey exactly what I wanted to say, we send props to use in "Card.js" the way you said. I want to use the values in Card.js on App.js. – Brandt Aug 01 '22 at 01:15
Yes. Thanks for clarification. Now In your case you can lift your state up to App.js if you are not using any state management library. For more Info please read https://reactjs.org/docs/lifting-state-up.html – Sumit kumar Aug 02 '22 at 02:29
This is quite complex task but it is the only way if we are not using context hook & state management library like redux. – Sumit kumar Aug 02 '22 at 02:31

How to use state value in another js file

1 Answers1