CODEWITHSUNDEEP
javascriptreactjs
Mohammed Asker
Mohammed Asker

Reputation: 71

How to append input values into HTML elements with React

I'm trying to build an input form that will display submitted values in another page using React hooks. I can see the values when console logged and what I'm looking for is how to append them as HTML elements.

The following code is a simplified version of my work.

const DisplayList = ({ inputs }) => (
  <div>
    <h3>page 2 (parent component)</h3>
    <div>{inputs}</div>
  </div>
);

const AddList = () => {
  const onSubmitForm = () => {
    console.log(`
      First name: ${inputs.firstName}
      Last name: ${inputs.lastName}`);
  };

  const { inputs, handleInputChange, handleSubmit } = InputForm(onSubmitForm);

  return (
    <div>
      <h3>page 1 (child component)</h3>
      <form onSubmit={handleSubmit}>
        <label>First Name: </label>
        <input
          type="text"
          name="firstName"
          onChange={handleInputChange}
          value={inputs.firstName || ""}
          required
        />
        <label>Last Name: </label>
        <input
          type="text"
          name="lastName"
          onChange={handleInputChange}
          value={inputs.lastName || ""}
          required
        />
        <button type="submit">Submit</button>
      </form>
      <hr />
      <DisplayList />
    </div>
  );
};

export default AddList;

Any help and guide provided are greatly appreciated!

Here's a link to check out full code: Code Sandbox

Upvotes: 0

Views: 2653

Answers (3)

amit wadhwani
amit wadhwani

Reputation: 1140

Passed input as props to second page component like below.

DisplayList inputs={inputs} />

And Used it in the component like below.

const DisplayList = ({ inputs }) => (
  <div>
    <h3>page 2 (parent component)</h3>
    <div>{inputs.firstName}</div>
    <div>{inputs.lastname}</div>
  </div>
);

Upvotes: 1

Heyyo
Heyyo

Reputation: 23

I just gave inputs object as props for DisplayList component and call the properties of firstName and lastName within p tags.

<DisplayList inputs={inputs} />

const DisplayList = ({ inputs }) => (
 <div>
   <h3>page 2 (parent component)</h3>
   <p>First Name:{inputs.firstName}</p>
   <p>Lastname:{inputs.lastName}</p>
 </div>

);

Upvotes: 1

ASDF
ASDF

Reputation: 351

I'm not sure what you are trying to do maybe:

Pass inputs in AddList:

<DisplayList inputs={inputs} />

And change DisplayList to:

const DisplayList = ({ inputs }) => (
  <div>
    <h3>page 2 (parent component)</h3>
    <div>{JSON.stringify(inputs)}</div>
  </div>
);

Upvotes: 1

Related Questions