useEffect to set value of TextField not working

AndrewLeonardi

I'm attempting to use useEffect to set the initial value of a MUI TextField on load. The value is being pulled from a database. This works the majority of the time however in some cases the useEffect does not correctly update the value of the textfield and it is just blank.

My Question: How can I change my code to make sure that the data being pulled from useEffect always sets the initial value of a textfield on load?

const [introText, setIntroText] = useState();

useEffect(() => {
  const fetchResults = async () => {
    const result = await axios({
      method: "GET",
      url: "https://server.site.com/userData",
      withCredentials: true,
    });
    setIntroText(result.data.introEssayText);
  };

  fetchResults();
}, []);

<TextField
  onChange={(e) => setIntroText(e.target.value)}
  value={introText}
  onInput={handleUpdatedIntro}
/>;
yousoumar

"This works the majority of the time however in some cases the useEffect does not correctly update the value of the textfield and it is just blank". Make sure result.data.introEssayText is not empty for all use cases.

Other than that, having const [introText, setIntroText] = useState() would trigger the below warning for a normal input which I belive TextField would fall back to.

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components

Insted use const [introText, setIntroText] = useState("") so the initial value of the input is "" instead of undifined.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Set value of textfield with javascript

Flutter set value to a textfield

react set value to a textfield

use uidatepicker to set textfield value

React js How to get Value within a useEffect and display on defualtValue textfield

How to set value to second page textfield from Main page textfield

How to set value of a Date Textfield in Material UI

how to set value style in center (at TextField Flutter)

How to set grouped TextField value to the state?

Can't set a variable to the value of a textfield

how to show datetimepicker and set the chosen value in textfield

Set value of TextField from another window in javafx

Can't set the value of a static TextField in javafx

SetValue not working to set the value of a cell

Set scope input value not working

trying to set the value of a field but it is not working

useEffect throws an error when used to set input value

Programmatically set a TextField's value while in ReadOnly mode?

How do you set the value of a TextField from Dropdown Selection?

Set Child Component TextField's Value to Parent Components Dropdown Selection?

addEventListener to an element in a array doesn't set the expected value in the textfield - Javascript

How to set the Mapbox symbol layer textfield with GeoJSON property value?

In JavaFX, Is it possible to enable a CheckBox when the TextField's value is not set to Zero

how to set cursor position at the end of the value in flutter in textfield?

How can I set the value of my MaterialUI TextField to uppercase?

Java: How to set a value from javascript to a wicket component textfield

admin-on-rest: How to set the value of a TextField with an option selected in a DefaultOptionsField

Programmatically set value in material-ui Autocomplete TextField

How to set the initial value of useState with the value of another state set in a useEffect hook?

TOP Ranking

HotTag

Archive