import React, { PropTypes } from 'react'; const DebugObjectTable = ({debugObject}) => { return ( <div> <table> <thead> <tr> <th>Prop</th> <th style={{paddingLeft: '10px'}}>Value</th> </tr> </thead> <tbody> {Object.keys(debugObject).map(key => <tr key={key}> <td>{key}</td> <td style={{paddingLeft: '10px'}}>{debugObject[key]}</td> </tr> )} </tbody> </table> </div> ); }; DebugObjectTable.propTypes = { debugObject: PropTypes.object.isRequired }; export default DebugObjectTable;
The useful of the component is probably short lived, I basically just use it while I'm first setting up the form, but the instant feedback is pretty convenient, especially for noob like me.
import React from 'react'; import InsuredForm from './InsuredForm'; import DebugObjectTable from '../common/DebugObjectTable'; class InsuredController extends React.Component { constructor() { super(); this.state = { insured: {} }; this.onChange = this.onChange.bind(this); } onChange(event) { this.state.insured[event.target.name] = event.target.value; return this.setState({ insured: this.state.insured }); } render() { return ( <div> <InsuredForm onChange={this.onChange} /> <DebugObjectTable debugObject={this.state.insured} /> </div> ); } } export default InsuredController;
3 comments
We've also started to use redux in our application, so this debugging tool is pretty much irrelevant since we can use the Redux DevTools plugin.
ReplyGood blog post on ReactJS debugging, Thanks for explaining it with clear examples, Great stuff.
ReplyBest Regards,
ReactJS Online Training in India
ReactJS Training in Hyderabad
ReactJS Online Training in Hyderabad
ReactJS Online Training
Learn ReactJS Online
ReactJS Training
ReactJS Online Course
React JS Online Training
It was an excellent Blog to see from you which is very useful. Thank you so much for gathering all this information about React.js, it’s very clever and will be extremely helpful for all people.
ReplyPost a Comment