Scribd
Upload
2 views

ReactLab

The document outlines a React Lab program assignment where the student, Sammed Vijay Biraje, is tasked with creating a React app named 'liftstateup'. It includes instructions for building a component hierarchy with a MainComponent that manages state and passes data to child components TextData and OutputData via props. The document provides code snippets for each component and describes the functionality of updating and displaying data through user input.

Uploaded by

sammed biraje
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

ReactLab

The document outlines a React Lab program assignment where the student, Sammed Vijay Biraje, is tasked with creating a React app named 'liftstateup'. It includes instructions for building a component hierarchy with a MainComponent that manages state and passes data to child components TextData and OutputData via props. The document provides code snippets for each component and describes the functionality of updating and displaying data through user input.

Uploaded by

sammed biraje
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Name – Sammed Vijay Biraje React Lab program

Batch – B Web-Technology

Q 1 Create react app for name app as liftstateup app.


Code-
npx create-react-app liftstateup

Output-
Q 2 Create three components in below mention hierarchy Problem Statement
In this case, if there is some Data only in component TextData but, component
Output Data also wants that data. We know Component cannot access the data
because a component can talk only to its parent or child (Not cousins). Solution
We can define that data in data class and pass then to child class as a props
Code-
import React, { Component } from 'react'
import TextData from './TextData'
import OutputData from './OutputData'

export default class MainComponent extends Component {


constructor(props) {
super(props)
this.state = {
name: ""
}
}
updateValue = (newname) => { this.setState({ name: newname }) }
render() {
return (
<div>

<TextData data={this.state.name} update={this.updateValue}


> </TextData>
<OutputData data={this.state.name}></OutputData>

</div>
)
}
}
Q 3 Define MainHead component as ClassComponentclass Create defined a
state variable name inside constructor having initial value as “ ” In MainHead
Class component define a arrow function having one argument and function
name should be updateValue =(e) =>{ } that update the value of name variable
to the value written in text box by user . Hint updateValue=(newvalue)=> {
this.setState({name:newvalue}) } MainHead TextData OutputData
Code-
import React from 'react'

export default function OutputData(props) {


return (
<div>
<h1> {props.name} </h1>
</div>
)
}
Q 4 Pass name and updateValue both as a props in child component TextData .
Hint Q 4 In TextData Class component create textbox and onChange call its
function changeData =(e )=>{ this.update(e.target.value) } that passes textbox
value to parent class method update
Code-
import React, {Component} from 'react'

export default class TextData extends Component {

changeValue =(e)=>
{
this.props.update(e.target.value)
}
render() {
return (
<div>
<input type="text" onChange={this.changeValue}/>
{this.props.data}
</div>
)
}
}
Q 5 Create Another component OutputData as functional component that prints
name value passed by MainComponent as a props.
Output –

You might also like