How to pass information from components to components in React?-CodePudding

I have two components named <Add /> and <Modal>. In the <Add /> component I have a state for the click event on the component. When <Add /> is clicked, I set the state to true. I want to use that state information in the <Modal /> component.

I want to hide the modal based on the information from the <Add /> component's state. How can I achieve that?

This is the <Add /> component:

export default function Add() {
  const [clicked, setClicked] = useState(false)
  return(
    <div onClick={() => setClicked(true)} className={`bg-blue-500 inline-block p-4 fixed bottom-10 right-8`}>
      <FaPlus />
    </div>
  )
}

This is the <Modal /> component:

export default function Modal1() {
  return (
    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 translate-y-3/4">
      <div className="w-[300px] border p-4 rounded-md shadow-lg">
        <div className="inline-block my-4">
          <label className="text-xs opacity-70">Class Name</label>
          <input
            className="border py-2 px-4 rounded-md w-full"
            type="text"
            placeholder="Class Name"
          />
        </div>
        <div className="flex flex-col mb-4">
          <label className="text-xs mr-4 opacity-70">Image</label>
          <input
            className="rounded-md opacity-80"
            type="file"
            placeholder="Image"
          />
        </div>
        <div className="flex flex-row items-center justify-end">
          <button className="bg-slate-400 rounded-md px-4 py-2 mx-4 text-white">
            Cancel
          </button>
          <button className="bg-blue-500 px-4 py-2 rounded-md text-white">
            Add
          </button>
        </div>
      </div>
    </div>
  );
}

And this is the index.js file:

export default function Home() {
  return (
    <div className="relative">
      <Add />
      <Modal />
    </div>
  );
}

I imported the components correctly. And I'm using Next.js and tailwindcss.

CodePudding user response：

You'll want to lift the state up into the parent component

CodePudding user response：

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&ab_channel=CemEygiMedia

Best of luck