Módulo para React

Job.js

import React, {PropTypes} from 'react';
import CompaniesSearcher from './CompaniesSearcher';

export default class Job extends React.Component {
    constructor( props ) {
        super( props );

        this.state = {
            price: props.job.price
        };

        this.setPrice = this.setPrice.bind(this);
    }
    setPrice( e ) {
        this.setState( { price: e.target.value } );
    }
    render() {
        const job = this.props.job;
        const hasCompany = this.props.company.id;
        return <tr>
            <td className="harvest-company-invoices-job-name-col">
                { job.name }  <a target="_blank" href={ job.editLink }> | Edit <span className="dashicons dashicons-external" /></a>
            </td>

            <td className="harvest-company-invoices-select-company-col">

                {
                    ! hasCompany ?
                        <CompaniesSearcher
                            id={ this.props.company.id }
                            name={ this.props.company.name }
                            onSetCompany={ ( companyId ) => { this.props.onSetJobCompany( job.id, companyId ) } }
                        />
                        : null
                }
            </td>

            <td className="harvest-company-invoices-job-price-col">
                <input type="text" className="small-text" onChange={ this.setPrice } value={ this.state.price } />
                <button className="button set-job-price" onClick={ () => { this.props.onChangePrice( this.state.price ) } } >Update price</button>
            </td>

            <td className="harvest-company-invoices-job-draft-col">
                {
                    this.props.hasClient && hasCompany && ! job.drafted ?
                        <a className="draft-invoice" onClick={ () => { this.props.onTriggerJobAction( 'draft' ) } }>Draft Invoice</a>
                        : null
                }

            </td>
            <td className="harvest-company-invoices-job-done-col">
                {
                    this.props.hasClient && hasCompany ?
                        <a className="mark-done" onClick={ () => { this.props.onTriggerJobAction( 'done' ) } }>Mark as Done</a>
                        : null
                }

            </td>
        </tr>;
    }
}

Job.propTypes = {
    company: PropTypes.object.isRequired,
    onChangePrice: PropTypes.func.isRequired,
    hasClient: PropTypes.bool.isRequired,
    onTriggerJobAction: PropTypes.func.isRequired,
    onSetJobCompany: PropTypes.func.isRequired
};