React Logo

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


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

function App() {

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

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} 

export default Greeting;