CODEWITHSUNDEEP
javascriptreactjs
Giga Meta
Giga Meta

Reputation: 319

Onclick not displaying form react

I am trying to display a form when you press on the Edit button. In my console I see PRESSED!!!, but the form is not displaying. I don't need to bind because I use an Arrow function. Even when I remove the form and place an H1 tag, it's still not displaying. What can be the problem?.

 addForm = () => {
        const { title } = this.state;
        <form onSubmit={this.handleSubmit}>
            <label>Enter the title of the book!</label>
            <input type="text" name="title" value={title} onChange={this.handleChange} />
            <button type="submit" className="btn btn-success mr-1 mt-1">Add Book!</button>
        </form>
        console.log("PRESSED!!!")
    }


    selectButton = () => {
        if (this.props.typeButton == "CRUD") {
            return (
                <React.Fragment>
                    <button className="btn btn-success mr-1 mt-1" onClick={this.addForm}>Add</button>
                        <button className="btn btn-warning mr-1 mt-1">Edit</button>
                    <button className="btn btn-danger mr-1 mt-1">Delete</button>
                </React.Fragment>);



        }
    }

Upvotes: 0

Views: 41

Answers (1)

Vlad Gincher
Vlad Gincher

Reputation: 1102

The function in your onClick has JSX in it and not logic. You should add to the state a boolean to indicate if the form should be shown or not, and update it on click. Then, show it conditionally, like you are doing with selectButton itself (I'm guessing it's a class component, right?)

addForm = () => {
    const { title, showForm } = this.state;

    if (showForm) 
        return (
            <form onSubmit={this.handleSubmit}>
                <label>Enter the title of the book!</label>
                <input type="text" name="title" value={title} onChange={this.handleChange} />
                <button type="submit" className="btn btn-success mr-1 mt-1">Add Book!</button>
            </form>
        );
}


selectButton = () => {
    if (this.props.typeButton == "CRUD") {
        return (
            <React.Fragment>
                <button className="btn btn-success mr-1 mt-1" onClick={this.setState({...this.state, showForm: true})}>Add</button>
                    <button className="btn btn-warning mr-1 mt-1">Edit</button>
                <button className="btn btn-danger mr-1 mt-1">Delete</button>
            </React.Fragment>
        );
    }
}

render() {
    return (<>
        {selectButton()}
        {addForm()}
    </>);
}

BTW, <></> is the short syntax of <React.Fragment></React.Fragment>

Upvotes: 1

Related Questions