Passing Data in React

React allows you to split the UI into independent, reusable pieces so the user can work on the pieces individually. Components are similar to JavaScript functions but take in inputs called props and what is returned is what will be displayed on the screen.

seeing data on site

function Welcome(data) {

function greeting(){
console.log("Greetings friend")

}
 return <h1>Hello, {data.name}</h1>;
}

The difference between a component and function in terms of syntax is that a JavaScript function starts with a lower case while the react component starts with a capital letter.

For a user to access the data they must pass the information thru with a prop

sending data to component

  return (
    <div className="App">
      <PokemonPage data={data}/>

      {/* <PokemonCollection data={data}/> */}
    </div>
  );
}

Once it is sent to the other component then the user will have access to the data they are working with. But it should be destructed with a {} when passing it into the component.

function PokemonCard({ pokemon }) {

}

Without the prop being deconstructed you will have to use one extra step to deconstruct the data using dot( props.prop ) notation

In react you are also able to pass functions in as props to give scope to another component. You are able to write a function to handle a click and pass it thru to another component the same way you would pass data sent as a prop

Component and Function

function App() {
  function handleClick(){

  }

  return (
    <div className="App">
      <PokemonPage data={data} handleClick={handleClick} 
      {/* <PokemonCollection data={data}/> */}
    </div>
  );
}

Once the prop or function is passes thru the component it is accessible using dot(.) notation to populate the data on the site. the prop and the function must be wrapped in {} in the JSX inorder for the prop and/or function to be used.

without {destructing}

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}