 |
| Create Component with JSX Pass data with Props |
Aim:
Build simple React components that implement a render () methods, which takes input data and returns data to display. Use an XML-like syntax called JSX. Input data, passed into the component can be accessed by render () via this.props.
Component 1 :
| Welcome.js |
|---|
import React from 'react' class Welcome extends React.Component { constructor (props) { super() this.state = { message: 'You are Welcome: ' } } render () { return ( <> <> <h1>{this.state.message} {this.props.name}</h1> <h2>New Name: {this.props.newname}</h2> <h2>Your city is : {this.props.city}</h2> </> </> ) } } export default Welcome; |
Component 2 :
| index.js |
|---|
import ReactDOM from 'react-dom/client' import React from 'react' import Welcome from './Welcome' const root = ReactDOM.createRoot(document.getElementById('root')) root.render( <> <React.StrictMode> <Welcome name='Shahnawaz' newname='Sam' city='Siwan'/> </React.StrictMode> </> ) |
