How to manage props and state in react?

 Managing props and state in the react: need to start in just some small part first we need to create a stateless component and then import the where you want to show component details as given below example:

 

App.js

import React, { Component } from 'react';

import './App.css';

import UserInput from './UserInput/UserInput';

import UserOutput from './UserOutput/UserOutput';

 

class App extends Component {

 

  state = {

    username: 'Sheo Sagar',

    Hoby: 'Playing chess'

  }

 

  nameChangeHandler = (event) => {

    // console.log('clicked now');

    this.setState(

      { username: event.target.value }

    )

  }

 

  render() {

 

    return (

      <div className="App">

        <UserInput changed={this.nameChangeHandler} currentName={this.state.username} />

        <UserOutput userName={this.state.username} />

        <UserOutput hobies={this.state.Hoby} />

        <UserOutput />

      </div>

 

    )

  };

}

 

export default App;

 

userOutput.js

import React from 'react';

 

import './UserOutput.css'

 

const userOutput = (props) => {

    return (

        <div className="userOutputMain">

            <p>User Output Name: <strong>{props.userName}</strong></p>

            <p>My Hobbies : playing cricket!<strong>{props.hobies}</strong></p>

        </div>

    )

}

 

export default userOutput;

 

 

userInput.js

import React from 'react'

 

const userInput = (props) => {

 

    const style = {

        padding: '15px',

        color: '#000',

        backgroundColor: '#eee',

        border: '1px solid #ccc'

    }

 

    return <input type="text" onChange={props.changed} value={props.currentName} style={style} />

}

 

export default userInput;

 

 

UserOutput.css

.userOutputMain{ 

    background: #eee; 

    padding: 20px;

    max-width: 70%;

    margin: 20px auto;

}

 

 [Task1]