React Basics: Snippets 2

App.js with the following:

• Import the Greeting component
• Passing values to the component via props
• Setting default values making the passing of props data optional

App.js

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

function App() {

  return (
    <div>
      <header>
        <Greeting name="Rich" excitement={3}/>
        <Greeting name="Dave" age="31"/>
      </header>
    </div>
  );
}

export default App;

Greeting.js - Imported Component

• Default prop values, use of prop values in component

import React from 'react';

function Greeting({name, age = 22, excitement=1}) {
  
  return (
    Hello there {name}. You are {age} years old. 
    Excitement score is {excitement} 
    {"!".repeat(excitement)}
  );
}

export default Greeting;