old-tellall/web/src/components/IntentList.js

import React, { Component } from 'react';
import {Button} from 'react-md';
import IntentItem from './IntentItem';
import '../css/Intent.css'

class IntentList extends Component {
    constructor (props){
        super(props);

        this.state = {intents: props.allIntents, selectedIndex:props.selectedIndex, onIntentClick:props.onIntentClick};
    }

    componentWillReceiveProps(props){
        this.setState({intents: props.allIntents, selectedIndex: props.selectedIndex, onIntentClick: props.onIntentClick});
    }

    render() {
        return (
            <div className="IntentList">
                <Button className={this.props.selectedIndex===-2 ? "LaunchRequest-selected" : "LaunchRequest"} flat primary 
                        onClick={this.props.onLaunchRequestClick}>Launch request</Button>
                <div className="IntentList-title">
                    <h3>Intents</h3>
                </div>
                {
                    this.state.intents.map((intent,index)=>{
                    return <IntentItem 
                                key={index} intent={intent} index={index} 
                                selectedIndex={this.props.selectedIndex} 
                                onClick={this.state.onIntentClick}>
                            </IntentItem>
                    })
                }
                <br></br>
                <Button className={"AddIntent"} flat primary swapTheming onClick={this.props.onAddIntentClick}>Add intent</Button>
            </div>  
        );
    }
}

export default IntentList;