Been playing around with React recently in preparation for a new application. I wanted verification that object state was being manipulated when I hooked up onChange events to my form. I'd been using console logs, but I realized I should be able to easily show the data on the bottom of the form as I typed. So I created a generic React component which will display the contents of a JavaScript object in a table.
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, { 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;