javascript - How I can change a Button into a input text?

Question

So, I'm trying to create a button that when I click it, it should change into a input with a another button for submit. I'm using react and bootstrap.

 <div className="cold-md-2 col-sm-3">
    <div className="card-body">
        <button class="btn btn-lg btn-block btn-group py-3" type="button">New group 
        <i class="fas fa-plus"></i></button>
     </div>
 </div>

question from:https://stackoverflow.com/questions/65834754/how-i-can-change-a-button-into-a-input-text

Answer 1

You should probably create a state indicating wheter should render a button or an input, then on your render you check wich one you should render.

export default class Test extends PureComponent {
    constructor(props) {
        super(props);

        this.state = {
            type: 'button'
        };
    }

    toggleType() {
        this.setState({
            type: this.state.type === 'button' ? 'input' : 'button'
        });
    }

    render() {
        if (this.state.type === 'input')
            return <span>In here its the input HTML</span>;

        return (
            <button onClick={this.toggleType.bind(this)} type="button">Toggle</button>
        );
    }
}