random number not changing on submit in React form-CodePudding

I have built a travel journal however I ran into two big bugs, one of them where the id which is set to Math.random()*10000 and is expected to change on submit however it does not, another issue I have is where once I remove one journal entry, I am not able to add any more entries via submit.

I have tried adding the math.random in different places however it doesn't change, I have run out of ideas on how to tackle this issue, if you have any suggestions ,any help is appreciated.

import React, { useState } from "react";
import Card from "./Card";
import data from "./data";

function Entry(props) {
  const [entry, setEntry] = useState([
    {
      title: "",
      location: "",
      googleMapsUrl: "",
      startDate: "",
      endDate: "",
      description: "",
      imageUrl: "",
      id: Math.random() * 100000000,
    },
  ]);
  function handleChange(e) {
    setEntry((prevState) => {
      return {
        ...prevState,
        [e.target.name]: e.target.value,
      };
    });
  }

  // const newData = [...data];

  function handleSubmit(e) {
    e.preventDefault();

    setEntry((prevState) => {
      return {
        ...prevState,
      };
    });

    data.unshift(entry);
  }

  return (
    <div>
      <form className="entry-form">
        <h1 className="entry-title">Add another Travel Memory</h1>
        <div className="journal-entry">
          <input
            className="entry-input"
            type="text"
            value={entry.location}
            name="location"
            placeholder="LOCATION"
            onChange={handleChange}
            required
          />

          <input
            className="entry-input"
            type="text"
            name="title"
            value={entry.title}
            placeholder="LANDMARK"
            onChange={handleChange}
            required
          />
          <input
            className="entry-input"
            type="text"
            name="googleMapsUrl"
            value={entry.googleMapsUrl}
            placeholder="GOOGLE MAPS LINK"
            onChange={handleChange}
            required
          />

          <input
            className="entry-input"
            type="date"
            value={entry.startDate}
            name="startDate"
            onChange={handleChange}
            required
          />
          <input
            className="entry-input"
            type="date"
            value={entry.endDate}
            name="endDate"
            onChange={handleChange}
            required
          />
          <textarea
            className="entry-input"
            placeholder="ADD YOUR STORY OR A FUN FACT FROM  YOUR JOURNEY"
            name="description"
            value={entry.description}
            onChange={handleChange}
            required
          />
          <input
            className="entry-input"
            type="text"
            name="imageUrl"
            value={entry.imageUrl}
            placeholder="ADD A IMAGE LINK TO REMIND YOU OF YOUR TRAVEL"
            onChange={handleChange}
          />
          <button type="submit" onClick={handleSubmit} className="entry-btn">
            add your travel memory
          </button>
        </div>
      </form>
      <Card data={data} />
    </div>
  );
}

export default Entry;

CodePudding user response：

Math.random()*10000 and is expected to change on submit however it does not

Because no code was written to change it. Take a look at the state update in the submit handler:

setEntry((prevState) => {
  return {
    ...prevState,
  };
});

No values are changed. The new state is an exact copy of the previous state. Contrast this with the state update in the change handler for the input fields:

setEntry((prevState) => {
  return {
    ...prevState,
    [e.target.name]: e.target.value,
  };
});

Notice how the new state is constructed from the previous state, and a given field is updated.

If you want to update the id field in the submit handler, update the id field in the submit handler:

setEntry((prevState) => {
  return {
    ...prevState,
    id: Math.random() * 100000000
  };
});