how to display data on click react

Question

Implemented writing data from the form to the array. Everything works. but now I want to implement data output when I click on " SEND ARR " When I hang up a click on a button, respectively, the data is not displayed since in the function we access event.target.value

Please tell me how to rewrite the line so that I can display data when I click on the button? thank

home.js

import React from "react";
import "./../App.css"


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({
            count: this.state.count + 1
        });
    };


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

    updateInputValue(event) {
        let newArr = this.state.arr;
        let newlist = event.target.value;
        if (event.target.value) {
            newArr.push(newlist)
        }
        this.setState({
            inputValue: newArr
        });
        event.target.value = '';
    };


    render() {
        return (

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

                <input type='text' name="names" onClick={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>


        );
    }
}

where do you want to output your data?

Sachin
– Sachin

2020-04-27 09:29:57 +00:00
Commented Apr 27, 2020 at 9:29 — Sachin
– Sachin, Commented Apr 27, 2020 at 9:29

curtis jacques · Accepted Answer · 2020-04-27 10:36:16Z

1

Store the data from the input into invputValue each time the input is updated and on the click of the button update the arr content with the old values (...arr) plus the current input value (this.state.inputValue) . To make sure the old values are not deleted the arr is defined at the top of the class let arr = []. If you don't want it there you can instantiate it in the constructer which will run only once. i.e. this.arr = []

let arr = []
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({
            count: this.state.count + 1
        });
    };

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

    updateInputValue = e => {
      this.setState({ inputValue: e.target.value })
    }

    displayData = () => {
      arr = [...arr ,this.state.inputValue]
      this.setState({ arr, inputValue: "" })
    }

    clearData = () => {
      this.setState({ arr: [] })
    }

    render() {
      console.log("this.state.arr:", this.state.arr)
        return (

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

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

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

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

edited Apr 27, 2020 at 10:36

answered Apr 27, 2020 at 10:07

curtis jacques

961 silver badge5 bronze badges

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

6 Comments

Aleksf Over a year ago

thank! And yet, how to clear the form after clicking on the button?

curtis jacques Over a year ago

Do you mean the list? If you want to clear just make another button and in that button reset arr [this.setState({arr: []})]

Aleksf Over a year ago

meant to clear the "input field" itself after sending,.,after a click, the values in the input field remain and are not erased

curtis jacques Over a year ago

I update the code with the changes you want. If you're satisfied you can vote me up.

Aleksf Over a year ago

Thank you very much for taking the time to respond. I understand correctly that: this.setState ({arr, inputValue: ""}) replaces "arr" with "arr from state" and adds an empty "inputValue"?

|

Shubham Khatri · Accepted Answer · 2020-04-27 09:30:21Z

Instead of using onClick on input, use onChange and update value in state i.e. make the input a controlled component . Post that onClick of button take the value from state and push to the array and clear the input value

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>


        );
    }
}

Collectives™ on Stack Overflow

how to display data on click react

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related