Passing Data to Props in React

In React, props (short for properties) are used to pass data from one component to another. There are several ways to pass data to props, which can significantly impact the efficiency and readability of your code.

Manually Passing Data as Props

You can manually create attributes and pass values to props in a component.

Example

<Blog title="Learn HTML" content="Lorem ipsum dolor sit amet." />
<Blog title="Style your HTML" content="Lorem ipsum dolor sit amet." />

While this method is straightforward, it can become cumbersome and error-prone if you need to pass a lot of data manually.

Passing Array Data as Props

To streamline the process, you can use an array of data and pass it to the props.

Creating an Array of Data

const Data = [
    {
        title: "Learn HTML",
        content: "HTML is Hypertext Markup Language."
    },
    {
        title: "Style your HTML",
        content: "CSS is used to style HTML."
    },
    // Add more data objects as needed
];

Passing Data from the Array

You can pass the data from the array by accessing its elements via their index.

<Blog title={Data[0].title} content={Data[0].content} />
<Blog title={Data[1].title} content={Data[1].content} />
<Blog title={Data[2].title} content={Data[2].content} />
<Blog title={Data[3].title} content={Data[3].content} />

Passing Data from an External Component/File

For better code organization, you can create a separate component or file to manage your data array.

Creating and Exporting Data

const Data = [
    {
        title: "Learn HTML",
        content: "HTML is Hypertext Markup Language."
    },
    {
        title: "Style your HTML",
        content: "CSS is used to style HTML."
    },
    // Add more data objects as needed
];

export default Data;

Importing and Using Data

import Data from './Data';

<Blog title={Data[0].title} content={Data[0].content} />
<Blog title={Data[1].title} content={Data[1].content} />

Exporting Default Data Directly

You can also directly export an array without creating a variable.

export default [
    {
        title: "Learn HTML",
        content: "HTML is Hypertext Markup Language."
    },
    {
        title: "Style your HTML",
        content: "CSS is used to style HTML."
    },
    // Add more data objects as needed
];

Exporting Without Default

If you prefer not to use the default export, you can export the array as a named export.

export const Data = [
    {
        title: "Learn HTML",
        content: "HTML is Hypertext Markup Language."
    },
    {
        title: "Style your HTML",
        content: "CSS is used to style HTML."
    },
    // Add more data objects as needed
];

Importing Named Exports

import { Data } from './Data';

<Blog title={Data[0].title} content={Data[0].content} />
<Blog title={Data[1].title} content={Data[1].content} />

Task

Practice Passing Data to Props

Objective: Create a data file and pass the data as props to a component.

Create a Data File:

// Data.js
export const Data = [
    {
        title: "Learn HTML",
        content: "HTML is Hypertext Markup Language."
    },
    {
        title: "Style your HTML",
        content: "CSS is used to style HTML."
    },
    {
        title: "Learn JavaScript",
        content: "JavaScript is a programming language."
    }
];

Create a Blog Component:

// Blog.jsx
import React from 'react';

const Blog = ({ title, content }) => {
    return (
        <div className="blogDiv">
            <h2 className="title">{title}</h2>
            <p className="content" id="content">{content}</p>
        </div>
    );
};

export default Blog;

Import Data and Use in App Component:

// App.jsx
import React from 'react';
import { Data } from './Data';
import Blog from './Blog';

const App = () => {
    return (
        <>
            {Data.map((item, index) => (
                <Blog key={index} title={item.title} content={item.content} />
            ))}
        </>
    );
};

export default App;

This task will help you practice passing data to props from an array and using it in a component.

BEGGINER FRIENDLY

INTERMEDIATE

ADVANCED