My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

How to pass variable from a class component to functional component in react js

Chaitali Tanawade's photo
Chaitali Tanawade
·Aug 9, 2020·

4 min read

I am new to React Js and for my project I started coding an online test using React JS. I want to pass a value of the score variable from a Quiz.js class component to Graph.js functional component. Could you please help me with the solution? I am trying a lot and stuck. Please help me guys.

Quiz.js code:

import React, {Component} from 'react';
import { Pie } from 'react-chartjs-2';
import PieChart from './Graph';
class Quiz extends Component{

  constructor(props){
    super(props)
    this.state={
      userAnswer:null,
      currentIndex:0,
      options: [],
      quizEnd: false,
      score:0,
      disabled:true,
    }
  }
  checkStatistics(score)
      {
        console.log('in check statistics function')
        this.setState(
          {
            score: score
          }
        )

        // this.props.navigation.navigate("/Graph", {score })
      //  window.location.href = "/Graph";
      window.location.href = 'http://localhost:3000/Graph?score=${score}';
      }
render()
  {
    const {question,options,currentIndex,userAnswer,quizEnd}= this.state
    if(quizEnd){
      return(
        <div className="containerBox">
          <h1> Game Over. Final score is {this.state.score} points</h1>
          <p> The correct answers for the quiz are</p>
          <ul>
            {QuestionBank.map((item,index) => (
              <li className='options'
              key={index}>
                {item.answer}
              </li>
            ))}
          </ul>
          {currentIndex===QuestionBank.length-1 &&
        <button className="attemptButton" onClick={this.attemptAnotherTry} disabled= {this.state.disabled}>
            Retest?
        </button>
    }
{currentIndex===QuestionBank.length-1 &&
 <button onClick={this.checkStatistics.bind(this, this.state.score)}>Check Statistics</button>}
   </div>
      )
    }
 }
}

export default Quiz;

Graph.js code

import React, {useState, useEffect} from 'react';
const PieChart = (props) =>
{
const [chartData,setChartData]= useState({})

    const chart = () =>{
        setChartData({
            labels: ['Correct Answers', 'Incorrect Answers'],
            datasets:[
                {
                    label: 'statistical chart',
 data:[props.score,2],
 backgroundColor: ['rgba(255,99,132,1)',
                'rgba(255,205,86,1)'],
                borderWidth: 4
                }
            ]
        })
    }
   useEffect(()=>
   {
       chart()
   },[])
 return(
        <div>
<div style={{width:'1000px', height:'1000px',textAlign:"center",marginLeft:'250px'}}>
    <Pie  data={chartData}/>
    <Link to="/Test" style={{textAlign:"center"}}>Attempt test again</Link>
    {/* <Pie data={this.getChartData}/> */}
</div>
  </div>  



    )
}

export default PieChart;