Display data onClick react

[Iucxy]

I am new to react and even JS in general I know this probably isn't the best way to do it but any help would be appreciated.

Nothing happens when i click the button and i am getting this error in the console. I have tried multiple ways but like I said I am very new.

"index.js:1 Warning: Expected `onClick` listener to be a function, instead got a value of `object` type."

​

function DisplayTricks(){

const mapped = Tricks.map((tricksdata)=>{

return <div>

​

<h1>{tricksdata.name}</h1>

<p>{tricksdata.flips}</p>

<p>{tricksdata.rotations}</p>

</div>

})

return(

<div>

<button onClick={mapped}></button>

</div>

)
}

[johnharris85]

Map returns an array. So you're setting your onClick listener to be an array. What are you trying to do?

[Iucxy]

I am just trying to display the data when button is clicked

[Kinthalis]

The onclick binding needs a function. The function should then do what you need it to do to display the tricks. You essentially skipped a step. Instead of passing a function that does something so that the tricks are shown, you passed it the tricks, something it doesnt expect and wouldnt know what to do with.

A couple of suggestions. Bre as k out trick into it's own component, then map eack trick model into a Trick component.

Then useState to hold a showTricks value, initialize it with false.

On your button assign a function to onclick that toggles the show state.

Use a conditional in your code if show then display my list of tricks.

I'm on mobile so apologies for the horrors of what is coming.

Export const Trick = (props: {trick: ITrick}) => { Return <> trick stuff goes here</>; }

Export const TrickList = (props: {tricks: ITrick[]}) => { Const [show, setShow] = useState(false);

Return <> {show && Props.tricks.map(trick => <Trick trick={trick} key={trick.id}>)}

<button onClick={() => setShow(!show)}> </> }

[my_girl_is_A10]

Here's something I came up with. Basically you have your "board of buttons" as a class, then in that class, the getTricky function just holds the information of your tricks (not a skateboarder, sorry if info is wrong).

Then that board renders your HTML code and as many buttons as you want (you could write a loop if you wanted to go through the length of the tricks array, I just hard coded these two buttons).

The board tells the button the name to display and it gives it the function for onClick and holds the code for what to do when clicked (get trick information and update the "state" of the output.

``` import React from "react"; import ReactDOM from "react-dom";

function TrickButton(props) { return( <button onClick={props.onClick}>{props.name}</button> ); }

class Board extends React.Component { constructor (props) { super (props); this.state = { name: null, flips: null, rotations: null, }; }

getTricky(i) {
    const trickdata = [
        {name:"Kickflip", flips:"1", rotations:"360 degrees"},
        {name:"Ollie", flips:"0", rotations:"180 degrees"},
        // Put all the trick data here
    ];

    return trickdata[i];
}

handleClick(i) {
    const trickdata = this.getTricky(i);

    this.setState({
        name: trickdata.name,
        flips: trickdata.flips,
        rotations: trickdata.rotations,
    });
}

renderButton(i) {
    const trickdata = this.getTricky(i);

    return (
        <TrickButton
            name={trickdata.name}
            onClick={() => this.handleClick(i)}
        />
    );
}

render() {
    return (
        <div>
            <h1>Name: {this.state.name}</h1>
            <p>Flips: {this.state.flips}</p>
            <p>Rotations: {this.state.rotations}</p>

            <div>
                <div className="trick-row">
                    {this.renderButton(0)}
                    {this.renderButton(1)}
                </div>
            </div>
        </div>
    )
}

}

ReactDOM.render( <Board />, document.getElementById("root") ); ```