How to create input field dynamically in ReactJS?

Question

i have a project, and i would want to know how i can to create a inpult field after an event of onClick?

I have that code:

onSubmitCell = event => {
  const newCell = prompt("Please with new URL:");
  const personCurrent = event.target.value;
  axios.patch(`http://localhost:3004/employee/${personCurrent}`, {
      cellphone: newCell
    })
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.log(error);
    });
}

What it do? It get the value of alert and do the Patch to update the attribute of the object.

What do i want ? Instead of open an alert, i would want that appeared an input, and i get the value of this input and did the Patch.

Someone would can help me ? Please?

Nishant Dixit · Accepted Answer · 2018-05-08 18:11:43Z

2

You can use state for this I am sharing you basic code so you can Implement.

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isPatch: false
    };
  }

  onSubmitCell = event => {
    const newCell = prompt("Please with new URL:");
    this.setState({
      isPatch: true
    });
    const personCurrent = event.target.value;
    axios
      .patch(`http://localhost:3004/employee/${personCurrent}`, {
        cellphone: newCell
      })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  };

  onChange = e => {
    this.setState({
      patchValue: e.target.value
    });
  };

  render() {
    return (
      <div>
        {" "}
        {this.state.isPatch && (
          <input
            type="text"
            onchange={this.onChange}
            value={this.state.patchValue}
          />
        )}{" "}
      </div>
    );
  }
}

answered May 8, 2018 at 18:11

Nishant Dixit

5,5125 gold badges22 silver badges32 bronze badges

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

1 Comment

Jota Over a year ago

Wow, thank very much for your answer, helped me much my brother <3

Amanshu Kataria · Accepted Answer · 2018-05-08 18:12:53Z

1

You can do it using a state.

e.g.

constructor(){
   super();
   this.state={
       showInput: false
   }
}
render(){
    return(
        <div>
            {this.state.showInput && <input />}
        </div>
    )
}

Instead of alert you can change the state to true. It'll display the input.

edited May 8, 2018 at 18:12

answered May 8, 2018 at 18:07

Amanshu Kataria

3,4467 gold badges28 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to create input field dynamically in ReactJS?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related