How do I render different components on a page according to some action defined inside those said components?

Question

If I have the following App component:

function App() {
  if(test)
    return <Component1 />;
  else
    return <Component2 />;
}

But the value of test (true/false) is dependent on a button inside the two respective components. Clicking the button should flip the value of test (ie set to true if false and vice versa). How would I implement this?

Answer 1

You define test on App level and pass down a callback

function App() {
  let [test, setTest] = useState(false)
  if(test)
    return <Component1 setTest={setTest}/>;
  else
    return <Component2 setTest={setTest}/>;
}

inside the component you can implement the flipping logic like

props.setTest(ps=>!ps);

Answer 2

Your parent component should should have a state and provide child components with a proper way to change that state. Similar implementation as @gmoniava provided but without hooks may look like below:

class App extends React.Component {
  constructor(props) {
    super(props)
    this.changeState = this.changeState.bind(this);
    this.state = {
      test: false
    }
  }

  changeState() {
    this.setState({ test: !this.state.test });
  }

  render() {
    const { test } = this.state;

    return (
      <div>
        {test && <Component1 onChangeState={this.changeState} />}
        {!test && <Component2 onChangeState={this.changeState} />}
      </div>
    )
  }
}

App component contains state with test property in it. Also it has changeState function which toggle test in state.

changeState function is passed to child components as props. Child component calls that function inside which triggers parent function and state is changed:

function Component1(props) {
  return (<button onClick={props.onChangeState}>Component 1</button>);
}

Here is demo .

Answer 3

This works:

function App() {
  const [test, setTest] = useState(false);

  const example = () => {
    setTest(!test);
  };

  if (!test) {
    return <Component1 example={example} />;
  } else {
    return <Component2 example={example} />;
  }
}

and inside Component1 (and Component2 ):

function Component1(props) {
  return <button onClick={() => props.example()}>Click</button>;
}

Passing setTest directly as prop didn't work.