//destructering props in Class Component

//example of destructuring props in the constructor:

​

class MyComponent extends React.Component {

  constructor(props) {

    super(props);

    const { name, age } = this.props;

  }

}

​

//example of destructuring props in the render method:

​

class MyComponent extends React.Component {

  render() {

    const { name, age} = this.props;

    return (

      <div>

        {name}: {age}

      </div>

    );

  }

}

const { firstName, lastName, city } = person;

const UserCard = ({ name, role, age, profilePic }) => {

  return (

    <div>

      <p>Name: {name}</p>

      <p>Role: {role}</p>

      <p>Age: {age}</p>

      <img src={profilePic} alt={name} />

    </div>

  )

}

​

function App() {

  const user = {

    name: "Ranjeet",

    role: "WordPress Developer",

    age: 27,

    profilePic: "image.jpg",

  }

​

  return (

    <div>

        <UserCard {...user} />

    </div>

  )

}

​

export default App

const Input = (props) => {

    const { type, placeholder, name, changeHandler } = props;

    return <input 

    type={type} 

    placeholder={placeholder} 

    name={name} 

    className="block p-2 my-2 text-black" 

    onChange={changeHandler}/>

}

const Input = ({ type, placeholder, name, changeHandler }) => {

    return <input 

    type={type} 

    placeholder={placeholder} 

    name={name} 

    className="block p-2 my-2 text-black" 

    onChange={changeHandler}/>

}