# destructing

render ke ander Student,Metro ki property ko destructure karte hai.jaise niche kiya hai.
Agar same naam ki property to alag alag object main hai jaise Student main name ki property or component main name ki property tab destructing ke time Student ke name ko rename kar dete hai like=>name: studentName.
property ko hum destructing ke time per bhi define kar sakte hai
example=>studentClass = 5k

import "./styles.css";
import React from "react";

const Student = {
name: "ram",
rollNo: 300,
age: 28,
moterName: "sita",
fatherName: "rahul"
// studentClass:8
};
const Metro = {
speed: 40,
color: "white",
light: "white",
door: 10,
doorwindow: 17
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: ""
};
// this.clickHandler = this.clickHandler.bind(this);
}
clickHandler = () => {
this.setState({
name: "jahan"
});
};
inputHandler = (e) => {
const { value } = e.target;
console.log("gggggggggg", value);
this.setState({
name: value
});
};
render() {
const { name } = this.state;
const { rollNo, age, name: studentName, studentClass = 5 } = Student;
const { speed, door, ladyscoch = 13, doorwindow: metroDoor = 7 } = Metro;
return (
<div>
Hello World {name} {rollNo} {studentName} {age} {studentClass} {speed}{" "}
{door} {metroDoor} {ladyscoch}
<input onChange={this.inputHandler} type="text" value={name} />
<button onClick={this.clickHandler}>change name</button>
</div>
);
}
}
export default App;