Mar.09

React Learning :: Distructring Arguments

We can remove the object typing for all individual element.
/* Before Object Destructuring */
class Counters extends Component {
render() {
return (
<div>
<button
onClick={this.props.onReset}
className=”btn btn-primary btn-sm m-2″
>
Reset
</button>
{this.props.counters.map(counter=> (
<Counter
key={counter.id}
onDelete={this.props.onDelete}
onIncrement={this.props.onIncrement}
onDecrement={this.props.onDecrement}
counter={counter}
/>
))}
</div>
);
}
}
/* After Object Destructuring */
class Counters extends Component {
const {onReset,onDelete,onIncrement,onDecrement} = this.props;
render() {
return (

<div>
<button
onClick={onReset}
className=”btn btn-primary btn-sm m-2″
>
Reset
</button>
{counters.map(counter => (
<Counter
key={counter.id}
onDelete={onDelete}
onIncrement={onIncrement}
onDecrement={onDecrement}
counter={counter}
/>
))}
</div>

);
}
}
Share this Story:
  • facebook
  • twitter
  • gplus

Leave a comment

Facebook Comment