React passing props parent to child

Question

I would like to set a property in a child component that I can use when importing the component into the parent but I am unsure how to do it, I have tried lots of guides but not been able to apply them.

Here is my child

import React, { Component } from 'react'

export default class Home extends Component {

render() {

let subHeading = "DIY everyday carry biodiesel 90's direct trade iPhone. Kogi tilde coloring book, meh knausgaard pitchfork chartreuse pop-up keffiyeh lo-fi stumptown deep v live-edge."

return (
  <div className="container">
    <h1 className="title" >{ this.props.heading }</h1>
    <h3 className="subtitle">{ subHeading } </h3>
  </div>
)
}
}

and the parent

import React, { Component } from 'react';
import './App.css';
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
import Faq from './components/Faq/Faq';
import Home from './components/Home/Home';
import { Route } from 'react-router-dom';

class App extends Component {

 render() {
return (
  <div className="App">
    <Header heading='Ze header'/>

    <Route exact={true} path="/" component={Home} />
    <Route path="/faq" component={Faq} />

    <Footer />
  </div>
);
}
}

export default App;

So I want to set the text in h1 heading to be what ever i set it to be when I import in the header. Im prety sure that I need to add a constructor to the child but im not sure how to write it.

Help please?

It is slightly different to the item marked as a duplicate as that is passing props via the router where as I am trying to pass it a component directly

React passing props parent to child

0 Answers0