Data Transfer in React from App.js to components and back.

React Components and Data Transfer – A Beginner's Guide

React is all about breaking the UI into small reusable components. But how do these components communicate with each other?

In this blog post, we’ll cover:

• How to create components
• How to send data from App.js to components (props)
• How to send data back from components to App.js (callback functions)
• How to use children props for custom content

1. Create a Basic React App

Use npx create-react-app myapp to create your app. We'll work inside App.js and a few component files.

2. Creating a Simple Component

Let’s create a file Message.js:

// Message.js
function Message(props) {
  return <h2>Hello, {props.name}!</h2>;
}

export default Message;

This component accepts a name prop and displays it.

3. Passing Data from App.js to Component

// App.js
import React from 'react';
import Message from './Message';

function App() {
  return (
    <div>
      <Message name="Champak" />
    </div>
  );
}

export default App;

Output: Hello, Champak!

4. Sending Data Back to App.js (Lifting State Up)

Create a component NameInput.js that takes input and notifies the parent:

// NameInput.js
function NameInput({ onNameChange }) {
  return (
    <div>
      <input
        type="text"
        placeholder="Type your name"
        onChange={(e) => onNameChange(e.target.value)}
      />
    </div>
  );
}

export default NameInput;

And in App.js:

// App.js
import React, { useState } from 'react';
import Message from './Message';
import NameInput from './NameInput';

function App() {
  const [name, setName] = useState("Guest");

  return (
    <div>
      <NameInput onNameChange={setName} />
      <Message name={name} />
    </div>
  );
}

export default App;

This shows how to transfer data from a child component to the parent.

5. Using children to Pass Inner Content

Create a Card.js component that accepts any content:

// Card.js
function Card(props) {
  return (
    <div style={{ border: "2px solid #0077cc", padding: "10px", borderRadius: "10px" }}>
      <h3>Card Title</h3>
      <div>{props.children}</div>
    </div>
  );
}

export default Card;

Use it like this in App.js:

// App.js
import Card from './Card';

function App() {
  return (
    <div>
      <Card>
        <p>This is inside the card component.</p>
      </Card>
    </div>
  );
}

Whatever is placed between <Card>...</Card> becomes the children prop.

6. Summary

To recap:

• Use props to pass data from parent to child
• Use callback functions to send data back up
• Use props.children to pass inner content

7. What’s Next?

Now that you understand basic data flow, try building a mini form where data entered in one component is shown in another, with validation and styling!

---

🔗 GitHub Repo: https://github.com/yourusername/react-data-transfer-demo

---

🚀 Stay tuned for more tips at Programmers Picnic!