How to pass prop from child component to child component.

Question

Have to pass setScore function as prop from Nav.js to App.js to change the score value.

App.js
import logo from './logo.svg';
import './App.css';
import Nav from "./Component/nav.js";

function App() {
return (
<div className = "App">
<div className = "nav">
<Nav />
</div>
<button onClick={setScore(score + 1)}>Increment</button>
</div>
);
}

export default App;

//////////////////////////////
Nav.js
import {useState} from 'react'
import './Style Components/nav.css';

function Nav(){

const [score, setScore] = useState(0);

return (
<div className = "nav-container">
<div className="score" id="score">
{score}
{console.log(score)}
</div>
</div>
);
}

export default Nav;

Answer 1

App.js
import React, {useState} from "react";
import logo from './logo.svg';
import './App.css';
import Nav from "./Component/nav.js";

function App() {
const [score, setScore] = useState(0);

return (
<div className = "App">
<div className = "nav">
<Nav score={score} />
</div>
<button onClick={() => setScore(s=>s+1)}>Increment</button>
</div>
);
}

export default App;

//////////////////////////////
Nav.js
import {useState} from 'react'
import './Style Components/nav.css';

function Nav({score}){
return (
<div className = "nav-container">
<div className="score" id="score">
{score}
</div>
</div>
);
}

export default Nav;

Answer 2

I learn from all the tutorial website from internet including youtube tutorials.
https://www.google.com/search?ei=aQoKYN6iBKWc4-EPvK68aA&q=react.js+tutorial+-w3schools&oq=react.js+tutorial+-w3schools&gs_lcp=ChNtb2JpbGUtZ3dzLXdpei1zZXJwEAM6BAgAEEc6BQgAEMkDOgIIADoGCAAQFhAeOgkIABDJAxAWEB5QqG5Y1awBYOKxAWgAcAF4AIABjwGIAe8HkgEDOC4zmAEAoAEByAEIwAEB&sclient=mobile-gws-wiz-serp

Answer 3

Will you tell where have you learnt react js from.

Answer 4

Thanks