How to get state value from Input Slider in one JS file to another - ReactJS

Question

So I am looking to have a slider on my website which is contained in a file called Header.js. The code uses state to get the value and set its new value on change. I have another file for my array generation that generates random numbers thats size is based on the value of the slider

My question is how do I move the value of the slider to that other JS file with the array? Code for both files here:

Header.js:

import React, {Component, useState} from 'react'
import Slider from '@material-ui/core/Slider';

function Header() {

const [value, setValue] = useState(0);


const handleChange = (event, newValue) => {
    setValue(newValue);
}


return (
    <div className = "slider" style = {{width: "100px"}}> 
        <Slider value = {value} onChange = {handleChange}></Slider>
        <p>{value}</p>
    </div>
 )
}
export default Header

Array.js:

**import React, { Component} from 'react'


function Array(){
    
    //here is where i would do array generation based on the size of slider
    
    
    
    return(
        <div> 
            <h1>{array}</h1>
        </div>
    )
}


export default Array

App.js

function App() {
  return (
    <div className="App">

    <Header/>
    </div>
  );
}

Answer 1

You need to send value down to your Array component as a prop. See below:

Header.js

   import React, {Component, useState} from 'react'
    //import your Array component
    import {Array} from 'Array.js'
    import Slider from '@material-ui/core/Slider';
    
    function Header() {
    
    const [value, setValue] = useState(0);
    
    
    const handleChange = (event, newValue) => {
        setValue(newValue);
    }
    
    
    return (
            <>
            <div className = "slider" style = {{width: "100px"}}> 
                <Slider value = {value} onChange = {handleChange}></Slider>
                <p>{value}</p>
            </div>
           //Pass state to array component
           <Array value={value} />
           </>
     )
    }
    export default Header

Array.js

    **import React, { Component} from 'react'
    
    //Declare value as prop in the Array function
    function Array({value}){
        
        //here is where i would do array generation based on the size of slider
        
        
        
        return(
            <div> 
                <h1>{array}</h1>
            </div>
        )
    }
    
    
    export default Array