How to Pass Props to a Component in React

Question

I have 2 page components with their own routes. There is one header component that is to be used in both pages, and it is supposed to change its content depending on what page you're on.

How can I change the content in the header per page?

 return (
        <main className={theme.main}>
            <Header 
                title={this.state.headerTitle}
                boldTitle={this.state.boldTitle}
            />
            <div className={theme.content}>
                <Switch>
                    <Route path={'/page1'} component={Page1} />
                    <Route path={'/page2'} component={Page2} />
                </Switch>
            </div>
            <Footer/>
        </main>
    );

I am trying to pass props to the header in my Routes page as in the code below.

<Route path={'/page2'} component={Page2} currentTitle={this.state.headerTitle} />

---

UPDATE

I got it fixed this using the import { withRouter } from "react-router"; and

export default withRouter(Header);

in Header Component then he listen the routes and I can put the pathname for to do what I need.

Then, I don't need set up state, just listen the routes inside that MyComponent. Usign: this.props.location

Answer 1

MOVE YOUR HEADER INSIDE Page1 AND Page2.

<Route path={'/page2'} component={() => <Page2  currentTitle={this.state.headerTitle} 
 />} />

Then in header use currentTitle to change title.

Answer 2

Put Header into its own component and import it separately into each page component.

Then you can pass props into the header like this, when you call the Header in each page...

import Header from (wherever that component is)

class Page# extends React.component {

other code

render() {
return (
         <div>
           <Header currentTitle="this.state.headerTitle" />
           <rest of code for this page /> 
         </div> 
}

or whatever props you need.

Answer 3

I assume that the code you show lies inside the render() method of some React component, so that you have actually a state.

Note that the component attribute in the Route tag expects a value that is a function without arguments. The component to be rendered is the result of the function. But nothing forbids you to make some work before returning a value. I would try something like this

<Route path={'/page1'} component={() => {
    this.setState({headerTitle: ...what you want..., boldTitle: ...what you want...})
    return <Page1 />
}}/>

If Page1 is just a function, change the "return" line with return Page1()

Hope it helps - Carlos

Answer 4

you can use the redux library as global state

something like this

 class Main extends Component{
    render(){
    return (
            <main className={theme.main}>
                <Header 
                    title={this.props.headerTitle}
                    boldTitle={this.state.boldTitle}
                />
                <div className={theme.content}>
                    <Switch>
                        <Route path={'/page1'} component={Page1}/>
                        <Route path={'/page2'}component={Page2}
                        />
                    </Switch>
                </div>
                <Footer/>
            </main>
        )
    }
    const mapStateToProps = state =>{
     return {     headerTitle: state.headerTitle    }
    }
    export default connect(mapStateToProps)(Main)

Page1

 class Page1 extends Component{    
    changeTitle =()=>{
     this.props.actions.changeTitle("title from Page1")
    }
    render(){
    return (
    <div>
    <button onClick={this.changeTitle}>changeTitle</button>
    </div>
    )
    }
    const mapDispatchToProps = (dispatch)=> {
        return {
            actions: bindActionCreators({ changeTitle }, dispatch)
        }
    }
    export default connect(null, mapDispatchToProps)(Page1)

the code it's not functional but this is an Idea how you can use redux for this purpose