Back ArrowExplore all topics

Display data on click in Reactjs

share link

by vsasikalabe dot icon Updated: Feb 16, 2023

technology logo
technology logo

Solution Kit Solution Kit  

To display data on button click in React, Set the onClick function on a button element. An HTTP request is made when the button is clicked every time. Update the state values and display the data. The React onClick event handler prop allows you to call a function and trigger an action when a user clicks data, such as a button, in your app. setState method enables you to modify the state of the component directly using an object where keys are the name of the state and values are the updated value of that state. It happens when there are new props, state update values, and force updates. 


Event handlers establish action to be taken wherever an event is fired. This may be a button click or a change in a text input. 

A general use of an inline function inside an onClick event handler in React is to update a component’s state. Event handler names are written in camelCase order, so the on-click event is written as onClick in a React app. In addition to that, React event handlers appear inside curly braces. 

There are multiple ways to do this: 

  • Accessing a block of code inside the onClick handler 
  • Calling multiple functions inside the onClick handler 


Here is an example of how to display data on click in Reactjs: 

Preview of the output that you will get on running this code from your IDE

Code:

In this solution we use the React library.

how to display data on click react

JavaScriptdotLines of Code : 66dotLicense : Strong Copyleft (CC BY-SA 4.0)

export default class Home extends React.Component {
    constructor() {
        super()


        this.state = {
            count: 1,
            objexm: '',
            inputValue: '',
            arr: []
        }
        this.handleClick = this.handleClick.bind(this);
        this.updateInputValue = this.updateInputValue.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({
            count: prevState.count + 1,
            inputValue: [...prevState.inputValue, prevState.name],
            name: ""
        }));
    };


    createMarkup() {
        return {
            __html: this.state.inputValue
        };
    };

    updateInputValue(event) {
        let newVal = event.target.value;
        this.setState({
            name: newVal
        });
    };


    render() {
        return (

            <div className="home-header">
                <h2>{this.state.count}</h2>
                <button onClick={this.handleClick}>Add</button>

                <input type='text' name="names" value={this.state.name} onChange={this.updateInputValue} />

                {this.state.arr.map((arrs, index) => {
                    return (
                        <li
                            key={index}
                        >{arrs}</li>
                    )
                })}

<button>SEND ARR</button>
                <ul className="qwe">
                    <li dangerouslySetInnerHTML={this.createMarkup()}></li>
                </ul>
            </div>


        );
    }
}

Instructions

Follow the steps carefully to get the output easily.

  1. Install the Node.js and React on your IDE(preferable Visual Studio Code).
  2. Create React Application using npx create-react-app foldername.
  3. cd foldername.
  4. Open the folder in IDE.
  5. Copy the code using "copy" button above and paste it in App.js file(remove the earlier code from App.js).
  6. Import React.
  7. Open the terminal from IDE.
  8. npm start to run the file.


I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.


I found this code snippet by searching for 'Display data on click in Reactjs' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created in VS Code 1.73.1 version.
  2. The solution is tested on Nodejs 16.14.2 version.
  3. react 18.2.0 version.


Using this solution, we are able to display data on click in Reactjs with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to display data on click in Reactjs.

Dependent Libraries

create-react-appby facebook

JavaScript doticonstar image 100082 doticonVersion:v5.0.1doticon
License: Permissive (MIT)

Set up a modern web app by running one command.

Support
    Quality
      Security
        License
          Reuse

            create-react-appby facebook

            JavaScript doticon star image 100082 doticonVersion:v5.0.1doticon License: Permissive (MIT)

            Set up a modern web app by running one command.
            Support
              Quality
                Security
                  License
                    Reuse

                      You can search for any dependent library on kandi like react.

                      Support

                      1. For any support on kandi solution kits, please use the chat
                      2. For further learning resources, visit the Open Weaver Community learning page.

                      See similar Kits and Libraries

                      Open Weaver – Develop Applications Faster with Open Source

                      kandi

                      Community and Support

                      Company

                      Follow

                      • © 2023 Open Weaver Inc.