React - Dynamically adding input tag using state

Question

I want to add new input tags to my web page when I click on Add input button.

Attempt:

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [addInput, setAddInput] = useState(false);
  const handleClick = () => setAddInput(true);
  return (
    <div className="App">
      <button onClick={handleClick}>Add Input</button>
      {addInput ? <input type="text" /> : ""}
    </div>
  );
}

How can I make the above code work to dynamically add new inputs?

So if I understand this correctly, you want to add several input tags and not only one? — Anonymous User
– Anonymous User, Commented Oct 7, 2020 at 9:07

Mehdi Dehghani · Accepted Answer · 2020-10-07 09:33:34Z

1

One way to do want you want.

const [state, setState] = useState([]);

const handleClick = () => {
    let inputs = Object.assign([], state);
    inputs.push(<input type='text' key={inputs.length} />);

    setState(inputs);
}

return (
    <div className="App">
        <button onClick={handleClick}>Add Input</button>
        {state}
    </div>
);

You should know, added inputs are Uncontrolled Components.

In order to help you to learn more about the possible solutions, here is another approach:

const [state, setState] = useState(0);

const handleClick = () => setState(state + 1);

const generateInputs = () => {
    const inputs = [];

    for (let i = 0; i < state; i++) inputs.push(<input key={i} type='text' />);

    return inputs;
}

return (
    <div className="App">
        <button onClick={handleClick}>Add Input</button>
        {generateInputs()}
    </div>
);

edited Oct 7, 2020 at 9:33

answered Oct 7, 2020 at 9:11

Mehdi Dehghani

11.7k6 gold badges64 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user14406023 Over a year ago

Thank you for the additional solution and more info on Uncontrolled components. It is helpful

Collectives™ on Stack Overflow

React - Dynamically adding input tag using state

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related