React.js: Components, JSX, and Props

January 15, 2021

Table of Contents


On this post we are showing two topics related to React.js Components.

The first one is regarding to how the output of the Components can be done using JSX or the createElement function.
The second is related to passing data to the Components via the props argument.


JSX vs createElement

React.js Components return html code that will be part of the user interface of your application. You can return html code with JSX or the createElement function.


JSX stands for Javascript XML, and it allows to write html code directly into your javascript code as shown on the Sample1 Component in the code snippet below. Using JSX the code will be more succinct and clear.

The createElement function which has the following syntax "React.createElement(component, props, ...children)" can be used to also output html code as shown on the Sample2 Component.


import React from "react";

// JSX vs createElement

function Sample1() {
    return (
        <div>
            <h1>Sample Component 1</h1>
            <div>This sample uses JSX</div>
        </div>
    );
}

function Sample2() {
    return (
        React.createElement('div', null,
            React.createElement('h1', null,
                "Sample Component 2"
            ),
            React.createElement('div', null,
                "This sample uses the createElement function"
            )
        )
    );
}

function App() {
    return (
        <>
            <Sample1 />
            <Sample2 />
        </>
    );
}

export default App;

Props, and Destructuring

The props argument is used to pass data to the React.js Component as shown on the Sample3a Component. Alternatively the props argument can be "destructured" into individual arguments as shown on the Sample3b Component.


import React from "react";

// Props

const name = 'John';
const email = 'john@example.com';
const number = 9;

function Sample3a(props) {
    return (
        <div>
            <h1>Sample 3a</h1>
            <div>{props.name}'s email is {props.email}</div>
            <div>The square root of {props.number} is {Math.sqrt(props.number)}</div>
        </div>
    );
}

// Destructuring

function Sample3b({name, email, number}) {
    return (
        <div>
            <h1>Sample 3b</h1>
            <div>{name}'s email is {email}</div>
            <div>The square root of {number} is {Math.sqrt(number)}</div>
        </div>
    );
}

function App() {
    return (
        <>
            <Sample3a name={name} email={email} number={number} />
            <Sample3a name="John" email="john@example.com" number={9} />
            <Sample3b name={name} email={email} number={number} />
        </>
    );
}

export default App;

Props Arrays

You can pass javascript arrays as the props arguments.


import React from "react";

// Arrays

const primary_colors = ['Red', 'Yellow', 'Blue'];

function Sample4({primary_colors}) {
    return (
        <div>
            <h1>Sample 4</h1>
            <div>The primary colors are:
                <ul>{
                    primary_colors.map((c) => <li key={c}>{c}</li>)
                }</ul>
            </div>
        </div>
    );
}

function App() {
    return (
        <>
            <Sample4 primary_colors={primary_colors} />
            <Sample4 primary_colors={['Red', 'Yellow', 'Blue']} />
        </>
    );
}

export default App;

Props Objects

You can pass javascript objects as the props arguments.


import React from "react";

// Objects

const person = {
    first_name: 'Isaac',
    last_name: 'Newton',
    birth_place: {
        hamlet: 'Woolsthorpe-by-Colsterworth',
        district: 'South Kesteven',
        county: 'Lincolnshire',
        country: 'England'
    },
    birth_date: '4 January 1643',
    fields: ['Physics',
             'Natural philosophy',
             'Alchemy',
             'Theology',
             'Mathematics',
             'Astronomy',
             'Economics'
    ]
}

function Sample5a(props) {
    return (
        <div>
            <h1>Sample 5a</h1>
            <div>{props.person.first_name} {props.person.last_name} was born
                in {props.person.birth_date},
                in {props.person.birth_place.county}, {props.person.birth_place.country}
            </div>
            <div>His fields of interests were:
                <ul>{
                    props.person.fields.map((f) => <li key={f}>{f}</li>)
                }</ul>
            </div>
        </div>
    );
}

function Sample5b({person}) {
    return (
        <div>
            <h1>Sample 5b</h1>
            <div>{person.first_name} {person.last_name} was born
                in {person.birth_date},
                in {person.birth_place.county}, {person.birth_place.country}
            </div>
            <div>His fields of interests were:
                <ul>{
                    person.fields.map((f) => <li key={f}>{f}</li>)
                }</ul>
            </div>
        </div>
    );
}

function Sample5c({first_name, last_name, birth_place, birth_date, fields}) {
    return (
        <div>
            <h1>Sample 5c</h1>
            <div>{first_name} {last_name} was born
                in {birth_date},
                in {birth_place.county}, {birth_place.country}
            </div>
            <div>His fields of interests were:
                <ul>{
                    fields.map((f) => <li key={f}>{f}</li>)
                }</ul>
            </div>
        </div>
    );
}

function App() {
    return (
        <>
            <Sample5a person={person} />
            <Sample5b person={person} />
            <Sample5c {...person} />
        </>
    );
}

export default App;

Copying Objects

You can copy javascript objects with destructuring as shown below with the "person2" object, which has been created using the "person.first_name", "person.last_name", and the destructured birth_place fields "...person.birth_place"


import React from "react";

// Copying Objects

const person = {
    first_name: 'Isaac',
    last_name: 'Newton',
    birth_place: {
        hamlet: 'Woolsthorpe-by-Colsterworth',
        district: 'South Kesteven',
        county: 'Lincolnshire',
        country: 'England'
    },
    birth_date: '4 January 1643',
    fields: ['Physics',
             'Natural philosophy',
             'Alchemy',
             'Theology',
             'Mathematics',
             'Astronomy',
             'Economics'
    ]
}

// New object (person2) created with attributes from another object (person)

const person2 = {first_name: person.first_name, last_name: person.last_name, ...person.birth_place};

function Sample5d({first_name, last_name, district, county, country}) {
    return (
        <div>
            <h1>Sample 5d</h1>
            <div>{first_name} {last_name} was born
                in {county}, {country}
            </div>
        </div>
    );
}

function App() {
    return (
        <>
            <Sample5d first_name={person.first_name} last_name={person.last_name} {...person.birth_place} />
            <Sample5d {...person2} />
        </>
    );
}

export default App;

Live Demo

See a live demo of the above code on StackBlitz here.