CODEWITHSUNDEEP
reactjs
juzello
juzello

Reputation: 401

Sending props to child of child component

I can't to send props from the parent component two levels down, to a child of a child component. I'm trying to send userInput.

Parent:

function App() {
  const [userInput, setUserInput] = useState("");
  return (
    <div className="App">
      <Header userInput={userInput} setUserInput={setUserInput} />
      <MainContainer userInput={userInput} setUserInput={setUserInput} />
      <Footer />
    </div>
  );
}

Middle component:

const MainContainer = (userInput, setUserInput) => {
  return (
    <div className="main-container">
      <AlbumContainer userInput={userInput} setUserInput={setUserInput} />
    </div>
  );
};

Final component:

const AlbumContainer = ({ userInput, setUserInput }) => {
  return (
    <div className="album-container">
      <h1>{userInput}</h1>
    </div>
  );
};

Thank you!

Upvotes: 0

Views: 35

Answers (1)

Khabir
Khabir

Reputation: 5854

Please use this for MainContainer Component. You did not destructuring for MainContainer Component. That's why it was not working.

const MainContainer = ({userInput, setUserInput}) => {
  return (
    <div className="main-container">
      <AlbumContainer userInput={userInput} setUserInput={setUserInput} />
    </div>
  );
};

Upvotes: 2

Related Questions