React: Destructuring props and state

Table of Contents

Destructuring props and state

Destructuring: The destructuring syntax is a JavaScript syntax that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. It can be used in locations that receive data (such as the left-hand side of an assignment or anywhere that creates new identifier bindings).

Functions components

/src/component/Greet.js

// Extracting `name` and `heroName` from props
const Greet = ({name, heroName}) => {
    return (
    <div>
    // puting only {name} and {heroName}
    <h1> Hello {name} </h1>
    <h2>AKA {heroName}</h2>
    {props.children}
    </div>
);
}

export default Greet

const Greet = (props) => {
    const {name, heroName} = props
    return (
    <div>
    <h1> Hello {name} </h1>
    <h2>AKA {heroName}</h2>
    {props.children}
    </div>
);
}

export default Greet

Class components

src/components/Welcome.js

class Welcome extends Component {
    render() {
        const {name, heroName} = this.props
        return (
        <div>
        <h1>Welcome, {name}</h1>
        <h2> aka {heroName}</h2>
        </div>
    );
    }
}

export default Welcome;