Why is html not printing on button click in reactjs?

Question

I am trying to print "Hello" onto the screen when the add button is clicked. But it is not showing. Thank you in advance for any answers you may have!

import React, { Component } from 'react';
import './App.css';
import './Login.jsx';
import './Navbar.jsx';

class MainPage extends Component {
    render() {
        return (
            <div>
                <div className="main-container">
                    <h1 style={{textDecoration:'underline'}}>Tasks</h1>
                    <div className="input-group mb-3">
                        <input type="text" id="task" className="form-control" placeholder="New Task"/>
                        <div id="name"></div>
                        <div className="input-group-append">
                            <button id="btn" className="btn btn-success" onClick={this.addTask}>Add</button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    addTask = () => {
        return (
            <div>
                <h2>Hello</h2>
            </div>
        )
    }
}

export default MainPage;

I think removing '=' from the function definition would work — Abhilekh Gautam
– Abhilekh Gautam, Commented Aug 26, 2020 at 13:54
On addTask you return a component, what you expect to happen? Are you trying to use alert() — Dennis Vash
– Dennis Vash, Commented Aug 26, 2020 at 13:56
for any HTML to be displayed, it has to be written inside your render function. I think you should use state here — wyfy
– wyfy, Commented Aug 26, 2020 at 13:58
you need to use the state that save if your tilte is display or not like : isTitleDisplay : false, next inside your jsx (where you want to see the title) {isTitleDisplay && <h1>YOUR TITLE</h1>}, last your function trigger by your button () => setState({isTitleDisplay: true}) .. — Aurelio LIMA FERREIRA
– Aurelio LIMA FERREIRA, Commented Aug 26, 2020 at 14:04

Davide Turini · Accepted Answer · 2020-08-26 14:01:45Z

Returning an HTML in an onClickEvent make no sense, where are the result going to be displayed?

I would manage it with a state, something like this

    class MainPage extends Component {
    
    this.state = {
            buttonPress:false
        }

        render() {
            return (
                <div>
                    <div className="main-container">
                        <h1 style={{textDecoration:'underline'}}>Tasks</h1>
                        <div className="input-group mb-3">
                            <input type="text" id="task" className="form-control" placeholder="New Task"/>
                            <div id="name"></div>
                            <div className="input-group-append">
                                 <button id="btn" className="btn btn-success" onClick={this.addTask}>Add</button>
                                 {{this.state.buttonPress? <h2>Hello</h2> : <span/>}}
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
    
        addTask = () => {
            this.setState({buttonPress:true});
        }
    }
    
    export default MainPage;

Arbin Shrestha · Accepted Answer · 2020-08-26 14:01:15Z

Where would the function return the "Hello" code?

import React, { Component } from 'react';
import './App.css';
import './Login.jsx';
import './Navbar.jsx';

class MainPage extends Component {
 state = {
    showMessage: false
  }
  addTask= () => {
   this.setState({showMessage: true});
  };
    render() {
        return (
            <div>
                <div className="main-container">
                    <h1 style={{textDecoration:'underline'}}>Tasks</h1>
                    <div className="input-group mb-3">
                        <input type="text" id="task" className="form-control" placeholder="New Task"/>
                        <div id="name"></div>
                        <div className="input-group-append">
                            <button id="btn" className="btn btn-success" onClick={this.addTask}>Add</button>
                            {this.state.showMessage && <div>
                              <h2>Hello</h2>
                            </div>}
                        </div>
                    </div>
                </div>
            </div>
        );
    }

}

export default MainPage;

Try this code instead, I created a state which tracks the visibility of the div. More information here:

How do I display text on button click in React.js

Bruno Rozendo · Accepted Answer · 2020-08-26 14:35:03Z

You should use state

import React, { Component } from 'react';

class App extends Component {

    constructor(props) {
        super(props)
        this.state = {testVarible: null}
    }

    render() {
        return (
            <div>
                <div className="main-container">
                    <h1 style={{textDecoration:'underline'}}>Tasks</h1>
                    <div className="input-group mb-3">
                        <input type="text" id="task" className="form-control" placeholder="New Task"/>
                        <div id="name"></div>
                        <div className="input-group-append">
                            <button id="btn" className="btn btn-success" onClick={this.addTask}>Add</button>
                        </div>
                    </div>
                </div>
                {this.state.testVarible}
            </div>

        );
    }

    addTask = () => {
        this.setState({testVarible: (
          <div>
            <h2>Hello</h2>
          </div>
        )});
    }
}

export default App;

Collectives™ on Stack Overflow

Why is html not printing on button click in reactjs?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related