How to fix “`value` prop on `input` should not be null” in React?

This article will show you how to avoid the warning: `Value` prop on `input` should not be null in React’ in some ways, such as adding value to the input using state or using useRef. Let’s go into detail now.

The reason of the error “`Value` prop on `input` should not be null” in React

The reason of this error is that you are somehow setting the value of the input, and the program recognizes it as null. Like the example below, we set the value to equal null, so a warning will appear as follows.

Code:

import React from "react";
 
export default function App() {
  return (
    <>
    <h2>`value` prop on `input` should not be null in React | LearnShareIT</h2>
    <input type="text" value={null} placeholder="Enter Name"/>
    </>
  );
}

Output:

So how to make the above warning no longer appear when you compile? Check out the steps below to prevent this warning.

How to fix this error?

Using the Optional chaining method

By doing this, you will use a trick in js that is using Optional chaining to build a script for the value.

Code:

import React, { useState } from "react";
 
export default function App() {
  const [value, setValue] = useState(null);
  return (
    <>
      <h2>
        `value` prop on `input` should not be null in React | LearnShareIT
      </h2>
      <input
        type="text"
        value={value == null ? "": "Name"}
        placeholder="Enter Name."
        onChange={(e) => setValue(e.target.value)}
      />
    </>
  );
}

As you can see in the above code, the state value we are setting is null. However, we have handled it when the value is null, it will convert to an empty string, and when there is a value, it will return “value”. Then we will avoid the warning `value` prop on `input` should not be null.

Using useRef method

This way, we will use the useRef hook to point to the input we need to set the value and handle onChange. We will set the ref. current.value assignment with the event. target.value.

Code:

import React, { useRef } from "react";
 
export default function App() {
  const ref=useRef();
 
  return (
    <>
      <h2>
        `value` prop on `input` should not be null in React | LearnShareIT
      </h2>
      <input
        type="text"
        ref={ref}
        placeholder="Enter Name."
        onChange={(e)=>{
          ref.current.value=e.target.value;
        }}
      />
    </>
  );
}

Pay attention to the console screen. You can see that the warning `value` prop on `input` should not be null in React is no longer appearing. Hope these tips will help you, have a nice day!

Summary

Summarize, the article showed you how to prevent the warning “`value` prop on `input` should not be null” in React. However, I recommend using the useRef hook method as it is compelling and supports many small methods.

Maybe you are interested:

• Does not contain a default export Error in React.js
• TypeError: map() is not a function in React
• Property does not exist on type ‘never’ in React

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs