how to pass function variable from one file to another in react

Question

I'm doing a quiz application where I have the final score in a function in app.js, now I want to draw a graph based on user result(show in bar graph like 6 right,4 wrongsomething like that), so I wrote a function to plot the graph in another file(chart.js) using chart.js 2. the thing is I'm not able to pass the final score from app.js to chart.js. at the end I want to show that graph also. note:I have used line chart for this, just to check whether my value is passing or not. App.js

export default function App() {         

return (
            
            <div className='app'>
                
                {showScore ? (
                    <div className='score-section'>
                        You scored {score} out of {questions.length}

                        <LineChart/>
                        
                    </div>
                ) : (
                    )
)
    }

chart.js

import React from 'react';
import {Line} from 'react-chartjs-2'
import App from '../App'
//import {score} from '../App'
//import {myExport} from '../App'
 
export default function LineChart()
{
    //console.log(App.score);
    
    

    const data = {
        
        
        labels:['jan','feb','march','april'],
        datasets:
        [
            {
                
                label:"sales",
                data:[10,7,9]

            }
        ]


        
    }
return( 
    
<div>

<Line data= {data}/>


</div>
    
    )
}

you can use props to pass the data from App.js to <LineChart data={data} /> get the data in export default function LineChart({data}){/*your code here*/} — Haque
– Haque, Commented Sep 18, 2020 at 10:39

Yannick Vermeulen · Accepted Answer · 2020-09-18 10:43:22Z

1

Just pass your score and question count as a prop to your LineChart component.

{showScore ? (
                <div className='score-section'>
                    You scored {score} out of {questions.length}

                    <LineChart
                        score={score}
                        question_count={questions.length}
                    />
                    
                </div>
            ) :

Then in your LineChart component, you can access them as

this.props.score
this.props.question_count

answered Sep 18, 2020 at 10:43

Yannick Vermeulen

1487 bronze badges

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

2 Comments

Ashwath Shetty Over a year ago

i tried that but it says props undefined @Yannick Vermeulen

Ashwath Shetty Over a year ago

only question length is passing, for score it says undefined.export default function LineChart({score,total_question})--->chart.js, app.js is same as you mentioned.

Ashwath Shetty · Accepted Answer · 2020-09-18 14:13:25Z

0

Yannick is right. i have to pass it as a prop. i made a mistake, in app.js LineChart function I passed it like Linechart(score), it should be Line chart({score}). corrected code is.

//App.js

<LineChart
                        score={score}
            total={questions.length}
                        />

//Chart.js
export default function LineChart({score,total})
and you can use score and total anywhere in you're function body.

edited Sep 18, 2020 at 14:13

answered Sep 18, 2020 at 12:33

Ashwath Shetty

1061 silver badge12 bronze badges

Collectives™ on Stack Overflow

how to pass function variable from one file to another in react

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related