Update setState in condition using react hooks

Question

I am new to React Hooks. I have been learning this language with a number of questions in stackoverflow. Even though I have explored the other questions here for 3 days to figure out my following issue, I have not found a proper way.

The following link is my simplified code:

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [render, setRender] = useState(true);
  const [show, setShow] = useState(true);
  return (
    <div className="App">
      <button onClick={() => setRender(!render)}>Render</button>
      {show ? (
        <div>
          <h1>Hello CodeSandbox</h1>
          <button onClick={() => setShow(!show)}>Hide</button>
        </div>
      ) : /// setShow(true) <- How can I update it?

      null}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

From my example, what I want to try is, when Hide button is clicked, Hello CodeSandbox disappears because it is null after show becomes false. However, the issue is when I click Render button, it should display Hello CodeSandbox again but it doesn't. I believe the reason is because show state still remains false. Thus, I want to update show state to true once Render button is clicked so that Hello CodeSandbox appears.

Is it possible if I can update state before using null? Or is there any better way?

Please include a minimal reproducible example in the question itself. Avoid relying only on off-site resources for your question. — Emile Bergeron
– Emile Bergeron, Commented Apr 27, 2021 at 19:53

T J · Accepted Answer · 2021-04-27 19:43:42Z

3

You are rendering based on the state show, so your Render button should manipulate that state, just set it back to true when it is clicked:

function App() {

 const [show, setShow] = useState(true);
  return (
    <div className="App">
      <button onClick={() => setShow(true)}>Render</button>
      {show ? (
        <div>
          <h1>Hello CodeSandbox</h1>
          <button onClick={() => setShow(false)}>Hide</button>
        </div>
      ) :
      null
     }
    </div>
  );
}

answered Apr 27, 2021 at 19:43

T J

43.2k13 gold badges87 silver badges142 bronze badges

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

Comments

Muhammad Ovi · Accepted Answer · 2021-04-28 06:58:14Z

1

Just create a function that will update both states and call it using your render button:

function App() {
  const [render, setRender] = useState(true);
  const [show, setShow] = useState(true);

  const update = () => {
    setRender(!render);
    setShow(!show)
  }
  
  return (
    <div className="App">
      <button onClick={update}>Render</button>
      {show ? (
        <div>
          <h1>Hello CodeSandbox</h1>
          <button onClick={() => setShow(!show)}>Hide</button>
        </div>
      ) : /// setShow(true) <- How can I update it?

      null}
    </div>
  );
}

edited Apr 28, 2021 at 6:58

answered Apr 27, 2021 at 19:42

Muhammad Ovi

1,08614 silver badges27 bronze badges

1 Comment

Bahrom Over a year ago

You should paste your code here as well (in case the link dies in the future).

Collectives™ on Stack Overflow

Update setState in condition using react hooks

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related