Today’s React learning was super interesting because I finally understood how React components communicate with each other and how state can be controlled from child components while still following React’s one-way data flow.

We also explored dynamic styling in React and learned why inline styles in React look different from normal HTML.
freeCodeCamp
Learn React JS - Full Beginner’s Tutorial & Practice Projects

---

Setting State from Child Components ⭐

One of the most important concepts in React is:

State usually lives in the parent component.

But sometimes, the action that changes the state happens inside a child component.

That’s exactly what we learned today.

---

Parent Component (App.jsx)

import React from "react"
import avatar from "./images/user.png"
import Star from "./components/Star"

export default function App() {
    const [contact, setContact] = React.useState({
        firstName: "John",
        lastName: "Doe",
        phone: "+1 (212) 555-1212",
        email: "itsmyrealname@example.com",
        isFavorite: false
    })

    function toggleFavorite() {
        setContact(prevContact => ({
            ...prevContact,
            isFavorite: !prevContact.isFavorite
        }))
    }

    return (
        <main>
            <article className="card">
                <img
                    src={avatar}
                    className="avatar"
                    alt="User profile picture of John Doe"
                />

                <div className="info">

                    <Star
                        isFilled={contact.isFavorite}
                        handleClick={toggleFavorite}
                    />

                    <h2 className="name">
                        {contact.firstName} {contact.lastName}
                    </h2>

                    <p className="contact">{contact.phone}</p>
                    <p className="contact">{contact.email}</p>
                </div>

            </article>
        </main>
    )
}

---

Child Component (Star.jsx)

import starFilled from "../images/star-filled.png"
import starEmpty from "../images/star-empty.png"

export default function Star(props) {

    let starIcon = props.isFilled
        ? starFilled
        : starEmpty

    return (
        <button
            onClick={props.handleClick}
            aria-pressed={props.isFilled}
            aria-label={
                props.isFilled
                    ? "Remove from favorites"
                    : "Add to favorites"
            }
            className="favorite-button"
        >
            <img
                src={starIcon}
                alt="star icon"
                className="favorite"
            />
        </button>
    )
}

---

Understanding What Happens Here 🧠

The state is created inside the parent component (App.jsx).

const [contact, setContact] = React.useState()

The parent component owns the state.

But the button that changes the state exists inside the child component (Star.jsx).

So how does the child component change the parent state?

The answer is:

We pass the function as props.

<Star
    isFilled={contact.isFavorite}
    handleClick={toggleFavorite}
/>

Here:

• isFilled sends data from parent to child

• handleClick sends the function from parent to child

Inside the child component:

onClick={props.handleClick}

When the button is clicked inside the child component, it calls the function that belongs to the parent component.

That parent function updates the state.

function toggleFavorite() {
    setContact(prevContact => ({
        ...prevContact,
        isFavorite: !prevContact.isFavorite
    }))
}

This is a very important React pattern.

The child component does not directly modify the state.

Instead:

• Parent owns the state

• Parent passes function to child

• Child triggers that function

• Parent updates the state

This keeps React applications predictable and clean.

---

Passing Data Around React 🔄

One of the core concepts in React is:

React follows one-way data flow.

Data flows only in the downward direction.

Like this:

Grandparent → Parent → Child

The data moves from top-level components down into smaller components using props.

---

Example

<App>
    <Header />
</App>

App can pass data to Header.

<Header title="React Learning" />

Inside the child:

function Header(props) {
    return <h1>{props.title}</h1>
}

This is downward data flow.

---

Can Child Send Data to Parent? 🤔

Directly? No.

React does not allow data to naturally move upward.

But we can still communicate upward using functions.

That’s exactly what we did in the favorite star example.

We passed a function downward and triggered it upward.

---

What About Sibling Components? 👨‍👦‍👦

Imagine this structure:

Parent
 ├── Child A
 └── Child B

Child A cannot directly send data to Child B.

Because React does not support sideways data flow.

Instead, we use a technique called:

Lifting State Up 🚀

This means:

• Move the shared state to the closest common parent

• Parent manages the state

• Parent passes data and functions down as props

Example flow:

Child A → Parent → Child B

This is one of the most important concepts in React architecture.

Whenever multiple components need the same data:

Lift the state up.

---

Sound Pads Challenge 🔊

Today we also started working with arrays and buttons using state.

---

Example

import React from "react"
import pads from "./pads"

export default function App() {

    const [padArray, setPadArray] = React.useState(pads)

    const buttonElements = padArray.map(pad => (
        <button key={pad.id}></button>
    ))

    return (
        <main>
            <div className="pad-container">
                {buttonElements}
            </div>
        </main>
    )
}

---

Understanding the Code 🧠

We imported an array called pads.

import pads from "./pads"

Then we stored that array inside state.

const [padArray, setPadArray] = React.useState(pads)

Now React can track changes to the array.

Then we used .map() to create buttons dynamically.

const buttonElements = padArray.map(pad => (
    <button key={pad.id}></button>
))

This is one of React’s biggest strengths.

Instead of manually writing multiple buttons, we generate UI from data.

---

Dynamic Styling in React 🎨

React also allows us to apply styles dynamically.

---

Example

import React from "react"
import pads from "./components/pads"

export default function App(props) {

    const [state, setState] = React.useState(pads)

    const buttonElements = pads.map(pad => (

        <button
            style={{
                backgroundColor:
                    props.darkMode
                        ? "#222222"
                        : "#cccccc"
            }}
            key={pad.id}
        >
        </button>

    ))

    return (
        <main>
            <div className="pad-container">
                {buttonElements}
            </div>
        </main>
    )
}

---

Difference Between HTML Inline Styling and React Styling ⚡

In normal HTML:

<div style="background-color: red;"></div>

The style is written as a string.

But in React:

<div style={{ backgroundColor: "red" }}></div>

The style is written as a JavaScript object.

---

Why Do We Use Double Curly Braces? 🤔

This confused me at first too.

style={{ backgroundColor: "red" }}

Why two braces?

Because:

• First {} → Enter JavaScript mode inside JSX

• Second {} → Create a JavaScript object

So this:

style={{ backgroundColor: "red" }}

Actually means:

style={ JavaScript Object }

---

Another Important Difference 🚀

In normal CSS:

background-color

But in React:

backgroundColor

React uses camelCase for CSS properties.

Examples:

CSS	React
background-color	backgroundColor
font-size	fontSize
margin-top	marginTop

---

Conditional Styling in React 🌗

This was super cool.

backgroundColor:
    props.darkMode
        ? "#222222"
        : "#cccccc"

If dark mode is true:

"#222222"

Else:

"#cccccc"

This allows React applications to create themes, dark mode, animations, and dynamic interfaces very easily.

---

What I Learned Today 💡

Today’s learning made React feel much more powerful.

I learned:

• How child components trigger parent state updates

• How React follows one-way data flow

• Why lifting state up is important

• How arrays are rendered dynamically

• How inline styling works in React

• Why React uses double curly braces

• How dynamic styling makes UIs interactive

React is slowly starting to feel less confusing and more logical every day 🚀