Title: How to pass information from components to components in React?
Tags: javascript;reactjs;next.js;tailwind-css
Question: I have two components named <Add /&gt; and <Modal&gt;. In the <Add /&gt; component I have a state for the click event on the component. When <Add /&gt; is clicked, I set the state to true. I want to use that state information in the <Modal /&gt; component.
I want to hide the modal based on the information from the <Add /&gt; component's state. How can I achieve that?
This is the <Add /&gt; component:
export default function Add() {
const [clicked, setClicked] = useState(false)
return(
<div onClick={() =&gt; setClicked(true)} className={`bg-blue-500 inline-block p-4 fixed bottom-10 right-8`}&gt;
<FaPlus /&gt;
</div&gt;
This is the <Modal /&gt; component:
export default function Modal1() {
return (
<div className=&quot;absolute top-1/2 left-1/2 -translate-x-1/2 translate-y-3/4&quot;&gt;
<div className=&quot;w-[300px] border p-4 rounded-md shadow-lg&quot;&gt;
<div className=&quot;inline-block my-4&quot;&gt;
<label className=&quot;text-xs opacity-70&quot;&gt;Class Name</label&gt;
<input
className=&quot;border py-2 px-4 rounded-md w-full&quot;
type=&quot;text&quot;
placeholder=&quot;Class Name&quot;
/&gt;
</div&gt;
<div className=&quot;flex flex-col mb-4&quot;&gt;
<label className=&quot;text-xs mr-4 opacity-70&quot;&gt;Image</label&gt;
<input
className=&quot;rounded-md opacity-80&quot;
type=&quot;file&quot;
placeholder=&quot;Image&quot;
/&gt;
</div&gt;
<div className=&quot;flex flex-row items-center justify-end&quot;&gt;
<button className=&quot;bg-slate-400 rounded-md px-4 py-2 mx-4 text-white&quot;&gt;
Cancel
</button&gt;
<button className=&quot;bg-blue-500 px-4 py-2 rounded-md text-white&quot;&gt;
Add
</button&gt;
</div&gt;
</div&gt;
</div&gt;
And this is the index.js file:
export default function Home() {
return (
<div className=&quot;relative&quot;&gt;
<Add /&gt;
<Modal /&gt;
</div&gt;
I imported the components correctly. And I'm using Next.js and tailwindcss.
Solution(Edited):
index.js file:
export default function Home(props) {
const [modalShown, setModalShown] = useState(false)
return (
<div className={`relative`}&gt;
<AddButton modalShown={modalShown} setModalShown={setModalShown} /&gt;
<Modal1 modalShown={modalShown} setModalShown={setModalShown} /&gt;
</div&gt;
<AddButton /&gt; component:
export default function AddButton({modalShown, setModalShown}) {
return(
<div onClick={() =&gt; setModalShown(true)} className={`z-[99] bg-blue-500 inline-block p-4 rounded-full fixed bottom-10 right-8 cursor-pointer`}&gt;
<FaPlus /&gt;
</div&gt;
<Modal /&gt; component:
export default function Modal({modalShown, setModalShown}) {
const [modalShown, setModalShown] = useState(true);
return (
<div className={`${modalShown? '' : 'hidden'} transition-all duration-300 ease-in absolute top-1/2 left-1/2 -translate-x-1/2 translate-y-3/4 select-none`}&gt;
<div className=&quot;w-[300px] border p-4 rounded-md shadow-lg&quot;&gt;
// Text inputs here
...
...
<div className=&quot;flex flex-row items-center justify-end&quot;&gt;
<button onClick={() =&gt; setModalShown(false)} className=&quot;bg-slate-400 rounded-md px-4 py-2 mx-4 text-white&quot;&gt;
Cancel
</button&gt;
<button onClick={() =&gt; setModalShonw(false)} className=&quot;bg-blue-500 px-4 py-2 rounded-md text-white&quot;&gt;
Add
</button&gt;
</div&gt;
</div&gt;
</div&gt;

Here is the accepted answer: You'll want to lift the state up into the parent component
Comment for this answer: Am I doing the lift the state up thing correctly? I've edited the code in the question.
Comment for this answer: So, if I just remove the modalShown state and instead of creating the handleModal function, I use setClicked(false) in the onClick event on the buttons, would that mean I did everything correct with the code?
Comment for this answer: You're heading in the right direction. In your new code you're essentially storing the same information in two states: `modalShown` and `clicked`. In React, you should usually not duplicate state information. In this case, I would only store the state inside of _index.js_ (but call it _modalShown_, that's a better name).
Comment for this answer: Yes, that's correct

Here is another answer: You can use props for this. To pass data from one component to another, and Yes You can pass Function reference also!

Here is another answer: so there are a whole lot of ways of passing data between components. Using props is the simpler one. Here is a YT video on how to do so using props. You can also user shared Preferences...
https://www.youtube.com/watch?v=M_Fmvs5CiDo&amp;ab_channel=CemEygiMedia
Best of luck

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2022:00:07/21/22', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><reactjs><next.js><tailwind-css>', 'Title': 'How to pass information from components to components in React?', 'ViewCount': 50, 'id': 73069580, 'user_AboutMe': None, 'user_AccountId': 20228344.0, 'user_DisplayName': 'Nasem', 'user_Reputation': 111.0, 'user_Views': 23.0, 'user_id': 14835590.0}}