I am trying to set a default value to a TextField, with data obtained from a GetMapping call, but it does not set.

This is the information I get on the call

{
"id": 1,
"motivoConsulta": "Lorem",
"objetivosClinicos": "Lorem",
"otraInformacion": "Lorem",
"expectativas": "Lorem"
}

this is my code

class Iconsulta extends React.Component {
     constructor(props) {
            super(props);
        }

   state = {
        info: [],
          form: {
             motivoConsulta: "",
             expectativas: "",
             objetivosClinicos: "",
             otraInformacion: "",
      },
   };

  componentDidMount() {
    this.getInfo();
    }

getInfo = async () => {
 let res = await axios.get(
   `http://localhost:8080/expediente/findById/${this.props.id}`
    );
let data = res.data;
//console.log(data);
  this.setState({
      info: data,
   });
   console.log(this.state.info);
};

render() {
   return (
    <>
    <div className="form-section-consulta">
      <Title
        titulo="Informacion de la consulta"
        description="Motivacion y expectativas para el seguimiento"
      />

      <form onSubmit={this.manejadorSubmit}>

in this section is where I try to set the value with default Value, but it is not set with the data obtained from the API call

        <TextField
          className="input-txt"
          id="outlined-name"
          label="Motivo de la consulta"
          name="motivoConsulta"
          onChange={this.manejadorChange}
          defaultValue={this.state.info.motivoConsulta}
          //   helperText="Please enter your name"
        />
        <TextField
          className="input-txt"
          id="outlined-name"
          label="Expectativas"
          name="expectativas"
          onChange={this.manejadorChange}
          defaultValue={this.state.info.expectativas}

        />
        <TextField
          className="input-txt"
          id="outlined-name"
          label="Objetivos clinicos"
          name="objetivosClinicos"
          onChange={this.manejadorChange}
          defaultValue={this.state.form.objetivosClinicos}
        />
        <TextField
          className="input-txt"
          id="outlined-name"
          label="Otras Informaciones"
          name="otraInformacion"
          onChange={this.manejadorChange}
        />
      </form>
    </div>
    </>
   );
}
}

this is my form

CodePudding user response：

It looks like you are using your TextField components in uncontrolled mode. This means, the defaultValue is set when your component mounts. At this time, the GetMapping call is still executing asynchronously and this.state.info is still empty.

After the GetMapping call returns, this.state.info will be updated, but the defaultValue for the text fields remains unchanged.

To fix this, use your components in controlled mode. Try replacing the defaultValue property for yoru TextField components with value - this is how most UI libraries distinguish between controlled and uncontrolled mode.