Why the data is updated but the data is not printed on the order list is not updated-CodePudding

I am new to react. I don't know why I have already updated the hobbies.json data once I submitted the form using useState(). But the updated data is not shown in the order list. Can you help me solve the problems.

My FormHobbies.js

import { useState } from "react";
import hobbies from "./data/hobbies.json";

function FormHobbies() {
  const [nameHobby, setNameHobby] = useState("");
  const [emojiName, setEmojiName] = useState("");

  const onChangeNameHandler = (event) => {
    setNameHobby(event.target.value);
  };

  const onChangeEmojiHandler = (event) => {
    setEmojiName(event.target.value);
  };

  const onSubmit = (event) => {
    event.preventDefault();
    hobbies.push({
      "Name of Hobbies": nameHobby,
      Emoji: emojiName,
    });
    emptyValues();
  };

  const emptyValues = () => {
    setNameHobby("");
    setEmojiName("");
  };

  return (
    <div id="formTopLevel">
      <form>
        <div id="formSecondLevel">
          <label id="labelOne">Please key in Your Hobbies</label>
          <input
            id="inputOne"
            type="text"
            onChange={onChangeNameHandler}
            maxLength="100"
            name="hobbies"
            placeholder="Type your hobbies"
          ></input>
          <label id="labelTwo">Please key in Your Emoji</label>
          <input
            id="inputTwo"
            onChange={onChangeEmojiHandler}
            type="text"
            maxLength="100"
            name="emoji"
            placeholder="Type the emoji"
          ></input>
          <button onClick={onSubmit}>Submit</button>
        </div>
      </form>
    </div>
  );
}

export default FormHobbies;

My ListHobbies.js

import React from "react";
import data from "./data/hobbies.json";

const ListHobbies = () => {
    console.log(data)
    return (
  <div>
    <ol>
      {data.map((dataOne, keyItems) => (
        <li key={keyItems}>
          {dataOne["Name of Hobbies"]} {dataOne["Emoji"]}
        </li>
      ))}
    </ol>
  </div>
)
}

export default ListHobbies;

My hobbies complement.hobbies.json

[{"Name of Hobbies":"Tennis", "Emoji": 127934}]

The App Component. My App.js

import FormHobbies from './FormHobbies';
import './css/formhobbies.css';
import ListHobbies from './ListHobbies';


function App() {
  return (
    <div>
       <FormHobbies/>
       <ListHobbies/>
    </div>
  );
}

export default App;

CodePudding user response：

React re-renders a component when the setState function is called to change the state but here hobbies is not a state that's why updated data is not showing on the UI. You have to store the data of hobbies in a state const [hobbies, setHobbies] = useState([]); and then in onSubmit function, you have to update the state that contains the data of hobbies, and then when you call <ListHobbies hobbies={{hobbies}}/> component you have to pass the hobbies state as a props and that's the way.

CodePudding user response：

First of all you can't write json files from a browser and React is a library for building client-side applications.

So the idea is first to store your json hobbies in a state const [hobbiesList, setHobbiesList] = useState(hobbies); and share it with among other components using props.

Here is the working sandbox: https://codesandbox.io/s/react-playground-forked-8imf8d?file=/index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";

import hobbies from "./data/hobbies.json";

function FormHobbies({ onSubmitFormHandle }) {
  const [nameHobby, setNameHobby] = useState("");
  const [emojiName, setEmojiName] = useState("");

  const onChangeNameHandler = (event) => {
    setNameHobby(event.target.value);
  };

  const onChangeEmojiHandler = (event) => {
    setEmojiName(event.target.value);
  };

  const onSubmit = (event) => {
    event.preventDefault();
    onSubmitFormHandle({
      "Name of Hobbies": nameHobby,
      Emoji: emojiName
    });
    emptyValues();
  };

  const emptyValues = () => {
    setNameHobby("");
    setEmojiName("");
  };

  return (
    <div id="formTopLevel">
      <form>
        <div id="formSecondLevel">
          <label id="labelOne">Please key in Your Hobbies</label>
          <input
            id="inputOne"
            type="text"
            onChange={onChangeNameHandler}
            maxLength="100"
            name="hobbies"
            placeholder="Type your hobbies"
          ></input>
          <label id="labelTwo">Please key in Your Emoji</label>
          <input
            id="inputTwo"
            onChange={onChangeEmojiHandler}
            type="text"
            maxLength="100"
            name="emoji"
            placeholder="Type the emoji"
          ></input>
          <button onClick={onSubmit}>Submit</button>
        </div>
      </form>
    </div>
  );
}

const ListHobbies = ({ data }) => {
  console.log(data);
  return (
    <div>
      <ol>
        {data.map((dataOne, keyItems) => (
          <li key={keyItems}>
            {dataOne["Name of Hobbies"]} {dataOne["Emoji"]}
          </li>
        ))}
      </ol>
    </div>
  );
};

function App() {
  const [hobbiesList, setHobbiesList] = useState(hobbies);
  const onSubmitFormHandle = (newHobby) => {
    setHobbiesList((oldHobbies) => [newHobby, ...oldHobbies]);
  };
  return (
    <div>
      <FormHobbies onSubmitFormHandle={onSubmitFormHandle} />
      <ListHobbies data={hobbiesList} />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));