I get output from an api and store it in a state setInfoMetrics(data.info);‍ And I put this value in the input value | the value is displayed correctly but I cannot change the value

this is my sate : const [infoMetrics, setInfoMetrics] = useState([]);

  useEffect(() => {
    const fetchMetricsInfo = async () => {
      try {
        const { data } = await axios.get(
          `API ADDRESS`,
          { headers: { Authorization: `Bearer ${token}` } }
        );
        setInfoMetrics(data.info);
      } catch (error) {
        console.error(error.message);
      }
    };

    fetchMetricsInfo();
  }, []);

THIS IS MY INPUT AND I CAN'T CHANGE THIS VALUE:

          <div className="form-row">
            <div className="col-md-12 mb-3">
              <div className="titrExplain">Title</div>
              <input
              value={infoMetrics.summary_interpretation}
                type="text"
                className="form-control"
                name="summary"
                placeholder="Summary"
                required
                onChange={(e) => setSummary(e.target.value)}
              />
            </div>

CodePudding user response：

//this is my sate : 

  const [infoMetrics, setInfoMetrics] = useState([]);
  useEffect(() => {
    const fetchMetricsInfo = async () => {
      try {
        const { data } = await axios.get(
          `API ADDRESS`,
          { headers: { Authorization: `Bearer ${token}` } }
        );
        setInfoMetrics(data.info);

        //case 1
        //your summary functions
        setSummary(/*what you want*/)
      } catch (error) {
        console.error(error.message);
      }
    };

    fetchMetricsInfo();
  }, []);

  //Case2
  //listening on infoMetrics changes and do something
  useEffect(()=>{
     //your summary functions
     setSummary(/*what you want*/)
  },[infoMetrics])





//THIS IS MY INPUT AND I CAN'T CHANGE THIS VALUE:

          <div className="form-row">
            <div className="col-md-12 mb-3">
              <div className="titrExplain">Title</div>
              <input
              value={summary}
                type="text"
                className="form-control"
                name="summary"
                placeholder="Summary"
                required
                onChange={(e) => setSummary(e.target.value)}
              />
            </div>

Value and onChange, attributes of should be the same set [value,setValue] of useState. Case1 and Case2 choose one and it might work.