React – Changing an Uncontrolled Input

React – Changing an Uncontrolled Input

If you have ever worked with React, you might have come across the concept of controlled and uncontrolled components. Controlled components are those whose value is controlled by React, while uncontrolled components maintain their own state.

In this blog post, we will focus on changing the value of an uncontrolled input in React. We will explore two different solutions to achieve this.

Solution 1: Using the ref attribute

One way to change the value of an uncontrolled input is by using the ref attribute. The ref attribute allows us to create a reference to the input element and access its value directly.

Here’s an example of how you can use the ref attribute to change the value of an uncontrolled input:

import React, { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef(null);

  const handleChange = () => {
    const inputValue = inputRef.current.value;
    console.log(inputValue);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleChange}>Get Value</button>
    </div>
  );
}

export default UncontrolledInput;

In this example, we create a ref using the useRef hook and assign it to the input element. We then access the value of the input element using the ref in the handleChange function.

Solution 2: Using the defaultValue attribute

Another way to change the value of an uncontrolled input is by using the defaultValue attribute. The defaultValue attribute allows us to set an initial value for the input element.

Here’s an example of how you can use the defaultValue attribute to change the value of an uncontrolled input:

import React, { useState } from 'react';

function UncontrolledInput() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = () => {
    console.log(inputValue);
  };

  return (
    <div>
      <input
        type="text"
        defaultValue={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleChange}>Get Value</button>
    </div>
  );
}

export default UncontrolledInput;

In this example, we use the useState hook to create a state variable called inputValue. We set the initial value of the input element using the defaultValue attribute and update the state variable whenever the input value changes.

Conclusion

Changing the value of an uncontrolled input in React can be achieved using either the ref attribute or the defaultValue attribute. Both solutions provide a way to access and manipulate the value of the input element.

Remember to choose the solution that best fits your specific use case and coding style. Happy coding!

HTML Output:

<p>If you have ever worked with React, you might have come across the concept of controlled and uncontrolled components. Controlled components are those whose value is controlled by React, while uncontrolled components maintain their own state.</p>
<p>In this blog post, we will focus on changing the value of an uncontrolled input in React. We will explore two different solutions to achieve this.</p>
<h2>Solution 1: Using the ref attribute</h2>
<p>One way to change the value of an uncontrolled input is by using the ref attribute. The ref attribute allows us to create a reference to the input element and access its value directly.</p>
<pre><code>import React, { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef(null);

  const handleChange = () => {
    const inputValue = inputRef.current.value;
    console.log(inputValue);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleChange}>Get Value</button>
    </div>
  );
}

export default UncontrolledInput;
</code></pre>
<h2>Solution 2: Using the defaultValue attribute</h2>
<p>Another way to change the value of an uncontrolled input is by using the defaultValue attribute. The defaultValue attribute allows us to set an initial value for the input element.</p>
<pre><code>import React, { useState } from 'react';

function UncontrolledInput() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = () => {
    console.log(inputValue);
  };

  return (
    <div>
      <input
        type="text"
        defaultValue={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleChange}>Get Value</button>
    </div>
  );
}

export default UncontrolledInput;
</code></pre>
<p>Changing the value of an uncontrolled input in React can be achieved using either the ref attribute or the defaultValue attribute. Both solutions provide a way to access and manipulate the value of the input element.</p>
<p>Remember to choose the solution that best fits your specific use case and coding style. Happy coding!</p>