Task 15 : Props in React

yogeshtakeo commented 1 year ago

Task: Working with Props in React

Objective: Practice using props in React to pass data between components.

Task Overview

Set up a new React project using a tool of your choice (e.g., Vite, Create React App, etc.).
Create multiple components and pass data between them using props.
Display the passed data in the components using JSX.

Task Details

Project Setup:
- Set up a new React project using a tool of your choice.
- Create a root component (e.g., App) to manage other components.
Create Parent and Child Components:
- Create a parent component (e.g., ParentComponent) and multiple child components (e.g., ChildComponent1, ChildComponent2).
- Render the child components within the parent component.
Pass Data from Parent to Child Components:
- Create data variables in the parent component (e.g., name, age, etc.).
- Pass the data variables as props to the child components when rendering them.
Access and Display Props in Child Components:
- In each child component, access the received props.
- Display the props data using JSX in the child components.
Test and Refine:
- Start the development server and run the React project.
- Verify that the props data is passed from the parent component to the child components correctly.
- Test different scenarios, such as passing different types of data (strings, numbers, objects) as props.

Task Submission

Share the code files (ParentComponent.js, ChildComponent1.js, ChildComponent2.js, etc.) with the implemented props usage.
Optionally, provide screenshots or a live demo link showcasing the working components with props.
Share the code files, screenshots, or links with your instructor.

Encourage your students to ask questions and seek assistance if they face any challenges during the task.Certainly! Here's a task that focuses on using props in React:

Task: Working with Props in React

Objective: Practice using props in React to pass data between components.

Task Overview

Set up a new React project using a tool of your choice (e.g., Vite, Create React App, etc.).
Create multiple components and pass data between them using props.
Display the passed data in the components using JSX.

Task Details

Project Setup:
- Set up a new React project using a tool of your choice.
- Create a root component (e.g., App) to manage other components.
Create Parent and Child Components:
- Create a parent component (e.g., ParentComponent) and multiple child components (e.g., ChildComponent1, ChildComponent2).
- Render the child components within the parent component.
Pass Data from Parent to Child Components:
- Create data variables in the parent component (e.g., name, age, etc.).
- Pass the data variables as props to the child components when rendering them.
Access and Display Props in Child Components:
- In each child component, access the received props.
- Display the props data using JSX in the child components.
Test and Refine:
- Start the development server and run the React project.
- Verify that the props data is passed from the parent component to the child components correctly.
- Test different scenarios, such as passing different types of data (strings, numbers, objects) as props.

Task Submission

Take a screenshot of the web browser displaying the rendered React component . Share the screenshot Optionally, submit the code files (App.js and any other relevant files) for review with the GitHub Repository.