Inspect Stateless Component Props in ReactJs

Hi, recently I've shared my tips in javascript, checkout here. On the last section, I did mention how do you debug using console.log.

So today, I'm going to share a little bit the same concept but it will be in ReactJs context. I hope it will useful for us 😊.

In my previous post, you can log current params of a callback function with
console.log(data) || ...someFn()

 const nameAndEmails = users.map((user) => console.log(user) || ({ name: user.name, email: user.email })) 

In ReactJs, especially for stateless components, sometime our coworker didn't write any PropTypes. Hence, it a little bit hard to know what kind of props shape it will receive.

Lets jump to the example:

// let say you have this kind of component const Button = (props) => ( <button class="btn btn-primary" type="button" {...props} > {`${props.children}`} </button> ); // use it like this  <Button type="Submit">Click Me</Button> 

You would not want to convert this component into { ... return (); }, because it requires a lot of typing, like this:

// 😓, need to type aloot of things here const Button = (props) => { console.log(props); return ( <button class="btn btn-primary" type="button" {...props} > {`${props.children}`} </button>  ); }; 

So, instead of convert to ordinary function, you can try this approach to log the props.

const Button = (props) => console.log(props) || ( <button class="btn btn-primary" type="button" {...props}> {`${props.children}`} </button> ); // It will logs:  // {  // type: 'Submit', // children: 'Click Me' // } 

Essentially, you can use this trick to any callback function like in map., .filter, .reduce

I hope you get the idea, See you next time.