CODEWITHSUNDEEP
reactjsevents
Ori Gomez
Ori Gomez

Reputation: 35

onClick event won't work in my React code

I have an onClick event inside render() that won't work, I've tried (clearly not) everything.

What am I doing wrong?

render() {

const Card = ({backgroundColor, id, state}) =>{  
    const style = {
        width: '100px',
        height:'100px',
        backgroundColor: backgroundColor,
        key: id,
        state: state,
    }
    return <div style={style} />
}

const finalCards = this.state.cards.map((n) =>(
  <Card backgroundColor={n.hiddenColor} key={n.id} state={n.state} onClick={() => alert('clicked')} />
));

return (
  <div className="App">
      {finalCards}
  </div>
);

} }

Upvotes: 1

Views: 26

Answers (1)

Edgar Henriquez
Edgar Henriquez

Reputation: 1383

Since Card is a separate component, you should keep it declare it outside of your render method.

But the problem is that you're passing an onClick function to a component but you're not hooking up that onClick function to the HTML element (in this case the <div />).

This should work

const Card = ({backgroundColor, id, state, onClick}) =>{  
    const style = {
        width: '100px',
        height:'100px',
        backgroundColor: backgroundColor,
        key: id,
        state: state,
    }
    return <div style={style} onClick={onClick} />
}

Upvotes: 2

Related Questions