How to Pass data From one component to other in react using props (data enterend by user) /onChange example

Step 1 :- First of all Create Folder Under src name Components after that create two js file in that

like this

Step 2 :- in it we created two coponents under Components folder Datainput is two take input from data and Dataoutput to print data

Step 3 :- Below in Datainput file

Explanation :- This code is a React component written in JavaScript. It defines a component called Datainput that renders an input field and a child component called Dataoutput.

Let’s break down the code step by step:

1. Import statements:

• React is imported from the 'react' library.
• useState is imported from the 'react' library. useState is a React hook that allows functional components to manage state.

2. Function declaration:

• The Datainput function is declared as a functional component.

3. State initialization:

• Within the component, the useState hook is used to initialize a state variable called name and a function to update it called setname. The initial value of name is an empty string ('').

4. Event handler:

The printname function is defined as an event handler for the input field's onChange event. It is triggered whenever the user types something in the input field.

• Inside the printname function, setname is called with the new value from the event's target (the input field) to update the name state.

5. JSX return:

• The component returns JSX, which represents the HTML-like structure that will be rendered.
• There is a <div> element that contains an <input> element and a <Dataoutput> component.
• The <input> element is a text input field with its value attribute set to the name state variable and its onChange attribute set to the printname function. This connects the input field to the state and event handler.
• The <Dataoutput> component is rendered with a prop uname set to the name state variable. This will pass the current value of name as a prop to the Dataoutput component.

6. Export:

• The Datainput component is exported as the default export of the module, allowing it to be imported and used in other parts of the application.

Overall, this code creates an input field where users can type a name, and whenever the value of the input changes, it updates the name state variable and passes it to the Dataoutput component as a prop.

1. Importing Dependencies:

• import React from 'react': This line imports the React library, which is necessary for creating React components.

2. Function Declaration:

• function Dataoutput(props) { ... }: This code defines a function component named Dataoutput that takes in a single parameter props. The props parameter represents the properties passed to this component from its parent component.

3. Component Rendering:

• The return statement within the Dataoutput function is where the component's JSX code resides. JSX is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files.
• <div>: This is an HTML-like tag representing a div element. It is a common container element used in React components to group and structure other elements.
• <h1>: This is an HTML-like tag representing a level 1 heading element (h1). It is used to display text.
• Name entered by user is {props.uname}: This is the content of the h1 element. It uses curly braces {} to embed JavaScript expressions within JSX. Here, it displays the value of the uname prop passed to the component. The prop value is accessed using props.uname.

4. Exporting the Component:

• export default Dataoutput: This line exports the Dataoutput component as the default export, making it available for other components to import and use.

Overall, this code defines a React component called Dataoutput that displays a heading (h1) with the text "Name entered by user is" followed by the value of the uname prop passed to it.