CODEWITHSUNDEEP
javascriptreactjs
Jonathan Small
Jonathan Small

Reputation: 1079

Basic react multi-page app changing Header contents

I'm very new to react so I apologize beforehand if I am not making myself clear. I have a basic react app with a very basic index.html page. The code looks like this:

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="root"></div>
        <script src="bundle.js"></script>
    </body>
</html>

The code I have in my index.js file looks like this:

import React from 'react';
import { render } from 'react-dom';
import * as Redux from 'redux';
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Home, Edit, Search, Github, Mine, About } from "./screens";

const Index = () => (
    <Router>
      <div>
        <Route path="/" exact={true} component={Home} />
        <Route path="/edit" component={Edit} />
        <Route path="/search" component={Search} />
        <Route path="/github" component={Github} />
        <Route path="/mine" component={Mine} />
        <Route path="/about" component={About} />
      </div>
    </Router>
);

render(<Index />, document.getElementById('root'));

The code I have in my edit.js looks like this:

import React from 'react';
import Header from '../components/Header';

const Edit = () => (
    <Header title="Capture" />
);

export default Edit;

This code sends "Capture" back to header.js and header.js receives the value of "Capture" in a variable called title which it displays within the tag.

What I am looking to do is pass 2 values from edit.js to header.js. I want to continue to send the value of "Capture" in the title variable but I also want to pass back the value "This is the capture function" in a variable called description. As you can see, I already have the variable called description in the header.js code. It will get placed within the tag.

How do I modify the code in edit.js to send 2 values back to edit.js?

Thank you for any assistance.

Upvotes: 2

Views: 1384

Answers (1)

Tholle
Tholle

Reputation: 112807

You can add an additional prop called description to your Header component, and use that new prop in the Edit component.

Example

//Edit.js
const Edit = () => (
  <Header title="Capture" description="This is the capture function" />
);

//Header.js
const Header = (props) => (
  <div>
    <h1>{props.title}</h1>
    <h2>{props.description}</h2>
  </div>
);

Upvotes: 1

Related Questions