React - Pass the props - Exercise

README.md

React

Pass the props - Exercise

For this exercise you will be using your code editor.

Create the app using the create-react-app.

npx create-react-app cra-and-props-exercise

Once created navigate to the project directory and start the app by running the command npm start.

cd cra-and-props-exercise

npm start

Task 1

First create a components folder inside of the existing src/ folder.

After making the folder create the files Title.js and Description.jsfor the new components in the src/components directory.

touch  src/components/Title.js   src/components/Description.js

Task 2

Create the Title component using the function syntax.

The component should be receiving data via the prop called appTitle, which you will pass from the Header.js, during the next steps .

For an example on passing data via props attributes check this example: Components and props .

When creating function components in React we have to specify props as the argument of the component function in order to be able to access the passed props.

src/components/Title.js

// src/components/Title.js

// Import react
import React from 'react';

// Create a function component and set props as the argument
function Title (props) {
  
  return (
    <div>
      <h3>TITLE:</h3>
    	<h1 className="App-title">{props.appTitle}</h1>
    </div>
  );

};


// export the component
export default Title;

Task 3

Create the Description component using the function syntax.

The component will be receiving data as nested children (remember the props.children), same as nesting text content or child tags within an HTML tag.

For an example on using this.props.children / props.chidren check this link: Composition - props.children (containment).

When creating function components in React we have to specify props as the argument to the component function in order to be able to access the passed props.

src/components/Description.js

// src/components/Description.js

// Import react
import React from 'react';

// Create a function component and set props as the argument
function Description (props) {
  
  return (
    <div>
    	<h3>Description:</h3>
    	<p> { props.children } </p>
    </div>
  );
  
};


// export the component
export default Description;

Task 4

Import the newly created components <Title /> and <Description /> in the Header.js component.

Place the new components inside of the <header> </header> tag.

Pass prop named appTitle containing the string value "Welcome To React, Ironhacker! " to the <Title/> component.

Pass the string "You are ready to take this to the next level!" enclosed between the <Description> </Description> tags .

You will need to use the opening and the closing tag so that component can access the string value via the props.children that we specified earlier when creating the Description component.

src/components/Header.js

// src/components/Header.js

import React from 'react';
import Title from './components/Title.js';
import Description from './components/Description.js';

// importing logo from src folder - loaded as a file in the bundle
import logoFileFromSRC from '../logo.svg';

// Logo served from the public folder (Production only)
// const logoPublicUrl = '/logo512.png';



// We don't need to specify the `props` argument as we are not using them in this component
function Header () {
  return (
      <header className="App-header">
        <img src={logoFileFromSRC} className="App-logo" alt="logo" />
        
      {/*       
          Use the <Title /> and <Description /> components
          and pass them the data via `props` or `props.children`.
      */}
      
      {/*      Your code here ...      */}

        
      </header>
  );
}

// export the component
export default Header;

Import the Header component in the App.js root component

Check that you have already imported the Header component in the App.js root component.

BONUS

Create a component <UserInfo /> which will contain <img /> and <p></p> tags.

    <div>
      <img src="https://i.imgur.com/OH7dtc0.png" alt="" />
      <p>Ironhacker</p>
    </div>

Once created, import it in the App.js and pass it as a prop to the <Header /> component.

For a hint check the example from the ReactJS docs and this Codpen example .

Description.js

// src/components/Description.js

// Import react
import React from 'react';

// Create a function component and set props as the argument
function Description (props) {
  
  return (
    <div>
    	<h3>Description:</h3>
    	<p> { props.children } </p>
    </div>
  );
  
};


// export the component
export default Description;

Header.js

// src/components/Header.js

import React from 'react';
import Title from './components/Title.js';
import Description from './components/Description.js';

// importing logo from src folder - loaded as a file in the bundle
import logoFileFromSRC from '../logo.svg';

// Logo served from the public folder (Production only)
// const logoPublicUrl = '/logo512.png';



// We don't need to specify the `props` argument as we are not using them in this component
function Header () {
  return (
      <header className="App-header">
        <img src={logoFileFromSRC} className="App-logo" alt="logo" />
    
      {/*       
          Use the <Title /> and <Description /> components 
          and pass them the data via `props` or `props.children`.
      */}
    
      {/*      Your code here ...      */}

        
      </header>
  );
}

// export the component
export default Header;

Title.js

// src/components/Title.js

// Import react
import React from 'react';

// Create a function component and set props as the argument
function Title (props) {
  
  return (
    <div>
      <h3>TITLE:</h3>
    	<h1 className="App-title">{props.appTitle}</h1>
    </div>
  );

};


// export the component
export default Title;