CODEWITHSUNDEEP
javascriptreactjsdom
codeedoc
codeedoc

Reputation: 1

Why React Re-rendering process does not change the value of checkbox?

I have just made a input box with onChange event handler and I have a checkbox. I clicked on checkbox to true and then I type in input box which will re-render the component as It has useState hook...But when the re- rendering happens why dont react just displays the checkbox with false value but rather it shows the previous state(that is true)???

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");

  function handleChange(event) {
    setName(event.target.value);
  }

  return (
    <div>
      <input
        type="text"
        onChange={handleChange}
        placeholder="Enter a value"
        value={name}
      />
      <label>RADIO2</label>
      <input type="checkbox" />
      {console.log(name)}
    </div>
  );
}

export default App;

I just want to learn about this react behaviour of re-rendering.

Upvotes: 0

Views: 79

Answers (3)

Ravi Chitroda
Ravi Chitroda

Reputation: 43

In React, when a component re-renders, it does not automatically reset the state to its initial values. It preserves the current state values. In your case checkbox is not linked to any state, so its value remains unchanged even when the component re-renders due to changes in the input field. This is the case of controlled and uncontrolled components.

for the controlled component, you can use another piece of state to represent the checkbox value and update it based on the input changes.

Here is controlled component checkbox, The codesandBox link is also here

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");
  const [isChecked, setChecked] = useState(false);

  function handleChange(event) {
    setName(event.target.value);
  }

  function handleCheckboxChange(event) {
    setChecked(event.target.checked);
  }

  return (
    <div>
      <input
        type="text"
        onChange={handleChange}
        placeholder="Enter a value"
        value={name}
      />
      <label>RADIO2</label>
      <input
        type="checkbox"
        checked={isChecked}
        onChange={handleCheckboxChange}
      />
      {console.log("name :", name)}
      {console.log("isChecked :", isChecked)}
    </div>
  );
}

export default App;

a new state isChecked is introduced to represent the checkbox value. The checked attribute of the checkbox is set to the value of isChecked, and the onChange event handler is added to update the state when the checkbox is clicked. Now, the checkbox will correctly reflect its state based on the input changes.

Upvotes: 0

CoderCat
CoderCat

Reputation: 72

React uses a virtual DOM instead of the actual DOM. When a component's state changes, React creates a new Virtual DOM and compares it with the older one. If React finds changes, it just updates the actual DOM. You can read more about the Virtual DOM here.

As per your code, when you type, the UI re-renders, and since the checkbox is not controlled by React, it retains the previous state. If you want the checkbox to behave as you intend, you have to let React control its state. Here's how you can do that:

Step 1: Use useState to store the state of the checkbox:

const [isChecked, setIsChecked] = useState(false);

Step 2: Create a function to handle the checkbox

 const handleCheckbox = (event) =>{
       setIsChecked(event.target.value);
    }

Step 3: Make these changes to the input to let React handle the state:

<input type="checkbox" checked={isChecked} onChange={handleCheckbox}/>

Your whole code should look like this:

import React, { useState } from "react";

function App() {
 const [name, setName] = useState("");
 const [isChecked, setIsChecked] = useState(false);

 function handleChange(event) {
    setName(event.target.value);
 }

 const handleCheckbox = (event) =>{
   setIsChecked(event.target.value);
}

 return (
    <div>
      <input
        type="text"
        onChange={handleChange}
        placeholder="Enter a value"
        value={name}
      />
      <label>RADIO2</label>
      <input type="checkbox" checked={isChecked} onChange={handleCheckbox}/> 
      {console.log(name)}
    </div>
 );
}

export default App;

Upvotes: 0

Nacho
Nacho

Reputation: 974

You need to manage the state of the checkbox:

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");
  const [isChecked, setIsChecked] = useState(false);

  function handleChange(event) {
    setName(event.target.value);
  }

  function handleCheckboxChange(event) {
    setIsChecked(event.target.checked);
  }

  return (
    <div>
      <input
        type="text"
        onChange={handleChange}
        placeholder="Enter a value"
        value={name}
      />
      <label>RADIO2</label>
      <input
        type="checkbox"
        checked={isChecked}
        onChange={handleCheckboxChange}
      />
      {console.log(name)}
    </div>
  );
}

export default App;

Upvotes: 0

Related Questions