Toggle one component from another using React hook

Question

I have a two child components and I want a button in one of them to toggle (on/off) the html in another. I have watched tutorials on lifting state up, and communication between components but most of it has to do with moving data. I want to manipulate a component from another. I would like the achieve this using useState, and without useContext if possible. Thanks!

THE PARENT

import React from "react";

function App() {
  return (
    <div>
      <AppProvider>
        <ComponentOne/>
        <Slideshow />
        <ComponentTwo/ >
      </AppProvider>
    </div>
  );

}

CHILD 1




export default function ComponentOne() {
 

  return (
    <div>
      <button>The button that toggles</button>
    </div>
  );
}

CHILD 2




export default function ComponentTwo() {
 

  return (
    <div>
      <div>The content that hides/shows</div>
    </div>
  );
}

Shyam · Accepted Answer · 2021-05-27 14:44:40Z

2

You need to use state to toggle the values. Pass the state to the ComponentTwo as props and pass the state updater function as the callback function to the ComponentOne as a prop.

import React , { useState, useCallback } from 'react';

function ComponentOne({ onToggle}) {
  return (
    <div>
      <button onClick={onToggle}>The button that toggles</button>
    </div>
  );
}

function ComponentTwo({show}) {

  return (
    <div>
     {show && <div>The content that hides/shows</div>} 
    </div>
  );
}

export default function App() {
  const [show, setShow ] = useState(true);

  const handleToggle = useCallback(() => setShow(prevShow => !prevShow),[])

  return (
    <div className="App">
      <ComponentOne onToggle={handleToggle} />
      <ComponentTwo show={show} />
    </div>
  );
}

Refer

useState

useCallback

answered May 27, 2021 at 14:44

Shyam

5,5071 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lache Over a year ago

Thank you, this answers it! Can i ask why you have useCallback? I am unfamiliar with that hook. Is there an alternative way without useCallback using only useState? and if so, why not just do that?

Shyam Over a year ago

The reason to use , useCallback here is everytime when there is a state change you re-run the function App due to this you will be creating the handleToggle function each time and passing at as props to the ComponentOne . Now consider ComponentOne renders a table along with the button. Now because the reference of handleToggle changes each time the component will keep re-rendering which results in re-rendering the table each time . But your intention is to only re-render ComponentTwo.

Collectives™ on Stack Overflow

Toggle one component from another using React hook

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related