How to create element on button click?

Question

I'm trying to create element for example and tried to use jquery it works with jquery but how to use only reactjs

$("#myButton").on("click", function() {
      $("#container").append('<div> <
        label > enter name < /label> <
        input onChange = {
          this.onInputChange
        }
        type = "text"
        placeholder = "what's your name" / >
        <
        /div>');
      });

<div>
  <label>enter name</label>
  <input onChange={this.onInputChange} type="text" placeholder="what's your name" />
</div>

I don't want to use some state tricks like true show element , false don't show. what if i want to show infinite elements of the div above not one or even 10.

I've tried using this a callback function that will try to use React.createElement() method

React.createElement("div", null, React.createElement("label", null, "enter name"), React.createElement("input", {
      onChange: this.onInputChange,
      type: "text",
      placeholder: "what's your name"
    }));

The expected result is on button Click i use react and only reactjs to create element and append it in the parent div.

Hi sasha, try my solution below and let me know if that helps. — Cat_Enthusiast
– Cat_Enthusiast, Commented Jul 12, 2019 at 4:17

Cat_Enthusiast · Accepted Answer · 2019-07-12 04:17:42Z

Essentially, you should still use state for the ability to keep track of controlled-inputs, especially if you plan on creating multiple input tags with a click of a button.

Consider this sandbox here: https://codesandbox.io/s/angry-taussig-c81dm

Working code:

import React from "react";
import ReactDOM from "react-dom";
import uuid from "uuid";

import "./styles.css";

class App extends React.Component {
  state = {
    items: [{ id: uuid(), text: "" }]
  };

  addListItem = () => {
    const newItem = { id: uuid(), text: "" };
    this.setState({
      items: [...this.state.items, newItem]
    });
  };

  onInputChange = e => {
    const { id, value } = e.target;

    const newArr = this.state.items.map(item => {
      if (item.id == id) {
        return {
          ...item,
          text: value
        };
      } else {
        return item;
      }
    });

    this.setState({
      items: newArr
    });
  };

  createList = () => {
    const { items } = this.state;
    return items.map(item => {
      return (
        <div>
          <label>enter name</label>
          <input
            id={item.id}
            onChange={this.onInputChange}
            type="text"
            placeholder="what's your name"
            value={item.text}
          />
        </div>
      );
    });
  };

  render() {
    return (
      <div>
        {this.createList()}
        <button onClick={this.addListItem}>Add</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Notes:

state.items just keeps track of all the inputs you have created. Each input contains an id and a text value.
createList() generates your divs by iterating over the state list items. The inputs are controlled, meaning they correspond with a value in our state. (An object with the same id).
onInputChange() is needed to pass the event values to the right object in the list.

Ultimately this is used to maximize the capabilities of JSX and its relationship with component-state, versus forcefully creating uncontrolled elements.

Collectives™ on Stack Overflow

How to create element on button click?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related