I m beginner to reactJS and I m having so much trouble with self learning.

I want to print the data I get from first page. I used 2 .js files

This is userpage.js:

import resultPage from "./resultPage";
// JS
//const input = document.getElementById('myText');
//const inputValue = input.value
// React
// value, onChange

const Multi = () => {
  const [person, setPerson] = useState({ firstName: "", email: "", age: "" });
  const [people, setPeople] = useState([]);
  const handleChange = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    setPerson({ ...person, [name]: value });
  };
  const handleSubmit = (e) => {
    //e.preventDefault();

    if (person.firstName && person.email && person.age) {
      const newPerson = { ...person, id: new Date().getTime().toString() };
      setPeople([...people, newPerson]);
      setPerson({ firstName: "", email: "", age: "" });
      resultPage(people, person);
    }
  };
  return (
    <>
      <article className="form">
        <form>
          <div className="form-control">
            <label htmlFor="firstName">Name : </label>
            <input
              type="text"
              id="firstName"
              name="firstName"
              value={person.firstName}
              onChange={handleChange}
            />
          </div>
          <div className="form-control">
            <label htmlFor="email">Email : </label>
            <input
              type="email"
              id="email"
              name="email"
              value={person.email}
              onChange={handleChange}
            />
          </div>
          <div className="form-control">
            <label htmlFor="age">Age : </label>
            <input
              type="number"
              id="age"
              name="age"
              value={person.age}
              onChange={handleChange}
            />
          </div>
          <button type="submit" className="btn" onClick={handleSubmit}>
            add person
          </button>
        </form>
      </article>
    </>
  );
};

export default Multi;

This has 2 textboxes and a submit button.

This code is from resultPage.js:

function resultPage(people, person) {
  return (
    <article>
      {people.map((person) => {
        const { id, firstName, email, age } = person;
        return (
          <div key={id} className="item">
            <h4>{firstName}</h4>
            <p>{email}</p>
            <p>{age}</p>
          </div>
        );
      })}
    </article>
  );
}
export default resultPage;

What am I doing wrong? I m new to reactjs. So kindly spare my obvious mistakes and help me.

CodePudding user response：

From

CodePudding user response：

You're calling resultPage in handleSubmit. That's not going to work. You want resultPage to be part of the rendering, probably conditionally.

Consider something like:

return <>
    {person.firstName !== "" && <resultPage people={people} person={person} />}
    {person.firstName === "" && <>
        // the form
    </>}
</>;

Also since resultPage is a component, it's best to capitalize it.

I think you probably want a 3rd component:

const MyComponent = () => {
    const [ people, setPeople ] = React.useState([]);
    const [ isEditing, setIsEditing ] = React.useState(false);

    return <>
        {isEditing && <Multi setPeople={(people) => {
            setPeople(people);
            setIsEditing(false);
        }}
        {isEditing === false && <resultPage people={people} />}
    </>;
}

Mutli now accepts a prop setPeople that is called in handleSubmit.