Adding Noteitem In Note Component In React

Adding NoteItem Component inside Note Component in React - step by step tutorial

Adding NoteItem in a Note Component in React 📝🧩 In any real-world React Note-taking app, you don't want to cram every note's title, content, and buttons directly inside one giant component. Instead, React encourages us to break the UI into small, reusable components — and that's exactly where NoteItem comes in. It will represent a single note card, while the parent Note component manages the full list of notes.

In this tutorial, we will learn:

What a NoteItem component is and why we separate it from Note

Creating the NoteItem functional component

Passing title and content as props

Rendering a list of NoteItem components using map()

Styling each note card with Bootstrap classes

Adding unique key props for efficient list rendering

---

Why Create a Separate NoteItem Component?

A reusable component like NoteItem keeps your code clean, testable, and easy to update. Instead of writing the same markup for every note inside Note.js, we write it once inside NoteItem.js and reuse it for as many notes as we want. This is one of the core ideas behind component-based architecture in React.

---

Step 1: Create the NoteItem Component

Create a new file called NoteItem.js inside your components folder. This will be a simple functional component that receives title and content as props.

import React from "react";
 
const NoteItem = (props) => {
  const { title, content } = props;
 
  return (
    <div className="card mb-3 shadow-sm">
      <div className="card-body">
        <h5 className="card-title">{title}</h5>
        <p className="card-text">{content}</p>
      </div>
    </div>
  );
};
 
export default NoteItem;

---

Step 2: Add Notes Data to Note.js State

Open your Note.js component and add an array of sample notes to state. Each note object will have a unique id, a title, and content.

import React, { Component } from "react";
import NoteItem from "./NoteItem";
 
export class Note extends Component {
 
  state = {
    notes: [
      { id: 1, title: "Grocery List", content: "Milk, eggs, bread, coffee." },
      { id: 2, title: "React Tips", content: "Always use keys when rendering lists." },
      { id: 3, title: "Meeting Notes", content: "Discuss project timeline on Monday." },
    ],
  };
 
  render() {
    return (
      <div className="container my-4">
        <h2 className="text-center mb-4">My Notes App 🗒️</h2>
      </div>
    );
  }
}
 
export default Note;

---

Step 3: Render NoteItem for Every Note Using map()

Now let's loop through this.state.notes using the map() method and render a NoteItem for each note. Don't forget to add a unique key prop — React uses it to efficiently track and update list items.

render() {
  const { notes } = this.state;
 
  return (
    <div className="container my-4">
      <h2 className="text-center mb-4">My Notes App 🗒️</h2>
 
      {notes.map((note) => (
        <NoteItem
          key={note.id}
          title={note.title}
          content={note.content}
        />
      ))}
 
    </div>
  );
}

---

Step 4: Full Updated Note.js and NoteItem.js

Here are both files with all the changes combined.

// Note.js
import React, { Component } from "react";
import NoteItem from "./NoteItem";
 
export class Note extends Component {
 
  state = {
    notes: [
      { id: 1, title: "Grocery List", content: "Milk, eggs, bread, coffee." },
      { id: 2, title: "React Tips", content: "Always use keys when rendering lists." },
      { id: 3, title: "Meeting Notes", content: "Discuss project timeline on Monday." },
    ],
  };
 
  render() {
    const { notes } = this.state;
 
    return (
      <div className="container my-4">
        <h2 className="text-center mb-4">My Notes App 🗒️</h2>
 
        {notes.map((note) => (
          <NoteItem
            key={note.id}
            title={note.title}
            content={note.content}
          />
        ))}
 
      </div>
    );
  }
}
 
export default Note;

// NoteItem.js
import React from "react";
 
const NoteItem = (props) => {
  const { title, content } = props;
 
  return (
    <div className="card mb-3 shadow-sm">
      <div className="card-body">
        <h5 className="card-title">{title}</h5>
        <p className="card-text">{content}</p>
      </div>
    </div>
  );
};
 
export default NoteItem;

---

NoteItem Props Reference

Prop	Type	Purpose
`title`	String	Displays the note's heading inside the card
`content`	String	Displays the note's main text inside the card
`key`	Number / String	Used internally by React to identify each list item uniquely (not accessible via props)

---

Frequently Asked Questions

Q: Why not just write each note's markup directly inside Note.js?
Because that would mean repeating the same JSX for every note. A separate NoteItem component keeps your code DRY (Don't Repeat Yourself) and much easier to maintain as your app grows.

Q: Why does React need a key prop when rendering a list?
The key prop helps React identify which items changed, were added, or were removed, so it can update the DOM efficiently instead of re-rendering the entire list.

Q: Can NoteItem be a class component instead of a function?
Yes — since NoteItem only displays props with no internal state, a functional component is the simpler and more modern choice, but a class component would work the same way.

---

Features and Learnings:-

Understood why breaking UI into reusable components like NoteItem matters.

Created a functional NoteItem component that accepts title and content props.

Added a notes array to Note.js state.

Rendered a NoteItem for every note using map().

Learned the importance of a unique key prop when rendering lists in React.

Styled each note as a Bootstrap card for a clean, real-world look.

Prepared the app for the next step: adding delete and edit functionality to each note.