After writing some code in React, I found using this.props to be too verbose. So, I researched some articles and learned how to approach this issue while coding.
class MyComponent extends Component {
// the traditional method
render() {
return <div>{this.props.value}, {this.props.value2}</div>
}
}
class MyComponent extends Component {
// an alternative way to avoid using this.props
render({value, value2}){
return <div>{value}, {value2}</div>;
}
}
class ParentComponent extends Component {
render(){
return <myComponent value={1} value2={2} />
}
}
I attempted to transpile the code at https://babeljs.io/repl but still struggled to grasp the advantages and disadvantages of these syntaxes.
Some questions that arose from my exploration:
- Is it beneficial to use destructuring to simplify the code?
- If not, what are the potential drawbacks of using this technique?