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:



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');


      { username: }




  render() {


    return (

      <div className="App">

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

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

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

        <UserOutput />







export default App;



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>





export default userOutput;




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;








    margin20px auto;




No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.