How to put values from json into inputs by default?

Question

In my React component

import React, { useEffect, useState } from "react";
import { useParams } from "react-router";
import { NavLink } from "react-router-dom";

import "./styles/editIntern.sass";

const EditIntern = () => {
  const { id } = useParams();
  const [intern, setIntern] = useState([]);
  const [name, inputName] = useState("");
  const [email, inputEmail] = useState("");
  const [start, inputStart] = useState("");
  const [end, inputEnd] = useState("");

  const [errorNameEmpty, isErrorNameEmpty] = useState(false);
  const [errorEmailValid, iserrorEmailValid] = useState(false);
  const [errorStartEmpty, isErrorStartEmpty] = useState(false);
  const [errorEndEmpty, isErrorEndEmpty] = useState(false);

  const validEmail = new RegExp(
    /(\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)/gm
  );

  const onFormSubmit = (e) => {
    e.preventDefault();
    let startDate = new Date(start).getTime();
    let endDate = new Date(end).getTime();

    if (startDate > endDate) {
      console.log("Start > end");
      console.log(startDate);
      console.log(endDate);
    } else {
      console.log("Ok");
      console.log(startDate);
      console.log(endDate);
    }
  };

  useEffect(() => {
    const fetchIntern = async () => {
      const response = await fetch(`http://localhost:3001/interns/${id}`);
      const intern = await response.json();
      setIntern(intern);
    };
    fetchIntern();
    console.log(`I want to get intern with id: ${id}!`);
  }, [id]);

  return (
    <div className="container">
      <img className="Logo" src="../logo.svg" alt="logo" />
      <section className="EditIntern">
        <NavLink to="/">
          <button className="EditIntern_back">
            <img
              className="EditIntern_back-img"
              src="../button_back_icon.svg"
              alt="button_back"
            />{" "}
            Back to list
          </button>
        </NavLink>
        <form className="EditIntern_form">
          <h4 className="EditIntern_form-title">Edit</h4>
          <label className="EditIntern_form-label EditIntern_form-label_name">
            Full name *
          </label>
          <input
            className="EditIntern_form-input EditIntern_form-input_name"
            type="text"
            name="name"
            value={name}
            onChange={(e) => {
              if (e.target.value === "") {
                isErrorNameEmpty(true);
              } else {
                isErrorNameEmpty(false);
              }
              inputName(e.target.value);
            }}
          />
          {errorNameEmpty ? (
            <span className="EditIntern_form-error EditIntern_form-error_name">
              Name can't be empty
            </span>
          ) : (
            <></>
          )}

          <label className="EditIntern_form-label EditIntern_form-label_email">
            Email address *
          </label>
          <input
            className="EditIntern_form-input EditIntern_form-input_email"
            type="text"
            name="email"
            value={email}
            onChange={(e) => {
              if (e.target.value === "") {
                iserrorEmailValid(true);
              } else if (!validEmail.test(e.target.value)) {
                iserrorEmailValid(true);
              } else {
                iserrorEmailValid(false);
              }
              inputEmail(e.target.value);
            }}
          />
          {errorEmailValid ? (
            <span className="EditIntern_form-error EditIntern_form-error_email">
              Example: [email protected]
            </span>
          ) : (
            <></>
          )}

          <label className="EditIntern_form-label EditIntern_form-label_start">
            Internship start *
          </label>
          <input
            className="EditIntern_form-input EditIntern_form-input_start"
            type="date"
            name="email"
            value={start}
            onChange={(e) => {
              if (!isNaN(e.target.valueAsNumber))
                inputStart(e.target.valueAsNumber);
              if (e.target.value === "") {
                isErrorStartEmpty(true);
              } else {
                isErrorStartEmpty(false);
              }
            }}
          />
          {errorStartEmpty ? (
            <span className="EditIntern_form-error EditIntern_form-error_start">
              Start date can't be empty
            </span>
          ) : (
            <></>
          )}

          <label className="EditIntern_form-label EditIntern_form-label_end">
            Internship end *
          </label>
          <input
            className="EditIntern_form-input EditIntern_form-input_end"
            type="date"
            name="email"
            value={end}
            onChange={(e) => {
              if (!isNaN(e.target.valueAsNumber))
                inputEnd(e.target.valueAsNumber);
              if (e.target.value === "") {
                isErrorEndEmpty(true);
              } else {
                isErrorEndEmpty(false);
              }
            }}
          />
          {errorEndEmpty ? (
            <span className="EditIntern_form-error EditIntern_form-error_end">
              End date can't be empty
            </span>
          ) : (
            <></>
          )}

          <input
            className="EditIntern_form-submit"
            type="submit"
            value="Submit"
            onClick={onFormSubmit}
          />
        </form>
      </section>
    </div>
  );
};

export default EditIntern;

I need inputs to be filled with values from the intern array when this component is called (intern.name, intern.email ...) Now with useState the inputs are empty by default. I need by default with data from intern but with the ability to erase and fill in as you like.

As I already wrote, intern is an array with data that is rendered when this component is opened, it has all the data that needs to be placed by default.

Answer 1

The problem if i see correctly is in that you don't getting data from array intern you just getting it from name, email, etc.

So on start set that values like intern.name to name etc.

after that you could save it inside array using

setIntern({name: name, ...intern})

and contiue with that using other parametrs