Question

there,
I’m currently working on a CV-Application project where users can give data to inputs contained in a form. When they click on “Validate”, this data stored in an array of arrays that represent school experiences then it is displayed on the side in their CV with an “Edit” button in a

that contains a data-attribute with a key that is the same as the React key. Clicking on Edit retrieves the data and I compare the last element of each array to find the correct array. Once I’ve found it, I pass it as a boolean object to my form component. This component has a useEffect that listens and works fine when the boolean is true, and fills my state variables with the object’s new data. Unfortunately, the inputs don’t visually display the new values. I don’t know how to do this, can you help me?

import PropTypes from 'prop-types';
import { useState, useEffect } from 'react';
import NameInputs from './NameInputs';
import { v4 as uuidv4 } from 'uuid';

export default function SchoolArea({
  className,
  addSchoolExpFn,
  schoolEditionBoolean,
  dataToEdit,
  toggleEditionBoolean,
}) {
  const [school, setSchoolValue] = useState('');
  const [study, setStudyValue] = useState('');
  const [dateBegin, setDateBeginValue] = useState('');
  const [dateEnd, setDateEndValue] = useState('');

  useEffect(() => {
    if (schoolEditionBoolean && dataToEdit) {
      console.log('Inside useEffect');
      console.log(dataToEdit.school);
      setSchoolValue(dataToEdit.school);
      setStudyValue(dataToEdit.study);
      setDateBeginValue(dataToEdit.dateBegin);
      setDateEndValue(dataToEdit.dateEnd);
    }
  }, [schoolEditionBoolean, dataToEdit]);

  const handleSchoolChange = (e) => {
    e.preventDefault();
    setSchoolValue(e.target.value);
  };

  const handleStudyChange = (e) => {
    setStudyValue(e.target.value);
  };

  const handleDateBeginChange = (e) => {
    setDateBeginValue(e.target.value);
  };

  const handleDateEndChange = (e) => {
    setDateEndValue(e.target.value);
  };

  const handleReset = () => {
    setSchoolValue('');
    setStudyValue('');
    setDateBeginValue('');
    setDateEndValue('');
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const array = [school, study, dateBegin, dateEnd, uuidv4()];
    addSchoolExpFn(array);
    e.target.reset();
    handleReset();
  };

  return (
    <div className={className}>
      <form onSubmit={handleSubmit}>
        <NameInputs
          type="text"
          placeholder="School Name"
          value={school}
          onChange={handleSchoolChange}
        />
        <NameInputs
          type="text"
          placeholder="Studies"
          value={study}
          onChange={handleStudyChange}
        />
        <NameInputs
          type="date"
          placeholder="12/11/2024"
          value={dateBegin}
          onChange={handleDateBeginChange}
        />
        <NameInputs
          type="date"
          placeholder="13/11/2024"
          value={dateEnd}
          onChange={handleDateEndChange}
        />
        <button type="submit">Validate</button>
      </form>
      <div>
        <p>School: {school}</p>
        <p>Study: {study}</p>
        <p>Date Begin: {dateBegin}</p>
        <p>Date End: {dateEnd}</p>
      </div>
    </div>
  );
}

SchoolArea.propTypes = {
  className: PropTypes.string,
  addSchoolExpFn: PropTypes.func,
  schoolEditionBoolean: PropTypes.bool,
  dataToEdit: PropTypes.object,
  toggleEditionBoolean: PropTypes.func,
};

I don’t know what to try to make it work :/

EDIT : If you have another tips to help me improve my code, I take it, I’m beginning with React 🙂

REACT – How to display a given value to an input inside a form?

LEAVE A COMMENT Hủy