CSFundamental
Published in

CSFundamental

Day 6: Props in React Continues…

As we started our discussion in the last lesson about props, let's dive into a bit complex version of props.

Split Components

Even components can grow bigger and to deal with that, we can split them into smaller units.

add this code to App.js file

import './App.css';import React from 'react';import Welcome from './components/welcome';const university = {      //line 1    text:'Hey, I am in University',    school: {    name: 'UBC',    country: 'Canada'}}function App() {  return (    <div className="App">      <Welcome k={university}/> //line 2    </div>);
}
export default App;

line 1: we are defining an object called university here so it is easier to put all data in one place. university object has text and school in it, the school itself is an object which contains name and country as properties.

line 2: we are declaring out the Welcome element with k as props which stored the university object in it.

add this code in welcome.js file

import React from 'react';function Welcome(props){    return(       <div className="main">         <div className="mid-1">          <p>{props.k.text}</p>   //line 1         </div>        <div className="mid-2">         <p>{props.k.school.name}</p> //line 2        </div>        <div className="mid-3">        <p>{props.k.school.country}</p> //line 3        </div>     </div>)}export default Welcome

line 1: inside this div tag, we are printing the text inside our university object with the help of props. We are doing the same for line 2 and line 3.

the output of the program

Conclusion

we have learned the way we can use props in the React component and how data flows from welcome.js to App.js. In future lessons, we will see how to even cut down the size of components when they grow bigger.

Photo by Sean Lim on Unsplash

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Saranjeet Singh

I write tutorials on Python, JavaScript, React, and Django. I write for InPlainEnglish and TheStartUp .