CODEWITHSUNDEEP
reactjsreact-hooks
JMon
JMon

Reputation: 3447

React Hooks - UseState - Passing object from Child to Parent

I am trying to pass data between a child and a parent component using Hooks and Functional Components.

In my parent component I have the following:-

import React, {useState} from "react"
import Card from './Card';

const CardsBoard = () => {

const { ratingObj, setRatingObj } = useState({});
console.log(ratingObj);

const cardInfo1 = {
  .......   
}

const cardInfo2 = {
  .......   
}

  return (
    <div className="container-fluid justify-content-center">
      <div className="row">
        <div className="col-md-6">
          <div>
            <h4>Player 1</h4>
          </div>
          <Card cardInfo={cardInfo1} onClick={() => setRatingObj(ratingObj)} />
        </div>
        <div className="col-md-6">
          <h4>Player 2</h4>
          <Card cardInfo={cardInfo2} onClick={() => setRatingObj(ratingObj)}/>
        </div>
      </div>
      <div className="row top-buffer">
        <div className="col-md-12 text-center">
          <button id="startGameBtn" name="StartGameButton" className="btn btn-secondary">START GAME</button> 
        </div>
      </div>
    </div>
  )
}

export default CardsBoard

Then in my child component I have the following:-

import React from "react"

const Card = ({ cardInfo, onClick }) => {

  return (
    <div className="card text-center shadow">
      <h4 className="card-title">{cardInfo.title}</h4>
      <div className="overflow">
        <img src={cardInfo.image} alt={cardInfo.image} className="card-image" />
      </div>
      <div className="card-body text-dark">
        <div className="container-fluid justify-content-center card-rating-text">
          {
            cardInfo.ratings.map(row => ( 
            <div className="row" key={row[0].title}>
              <div className="col-md-4 text-left">{row[0].title}</div>
              <div className="col-md-2 text-left card-rating-color" onClick={() => onClick(cardInfo.player, row[0].title, row[0].rating)} >{row[0].rating}</div>
              <div className="col-md-4 text-left">{row[1].title}</div>
              <div className="col-md-2 text-left card-rating-color" onClick={() => onClick(cardInfo.player, row[1].title, row[1].rating)}>{row[1].rating}</div>
            </div>
            ))
          }          
        </div>
      </div>
    </div>
  )
}

export default Card

At the moment I am getting an error:-

Uncaught TypeError: setRatingObj is not a function
    at onClick (CardsBoard.js:58)
    at onClick (Card.js:30)

How can I pass the onClick object from the child to the parent?

Thanks for your help and time

Upvotes: 0

Views: 963

Answers (1)

John Smith
John Smith

Reputation: 4353

Change

const { ratingObj, setRatingObj } = useState({});

to

const [ ratingObj, setRatingObj ] = useState({});

useState returns a two-element array in the shape of [state, setStateFunc], so you have to apply array destructuring to it.

Upvotes: 2

Related Questions