humidifier | CloudFormation | AWS library

    import React from 'react';
    import MaterialTable from 'material-table';

    export default class DictionaryTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        columns: [
            {title:'Need state',field: 'NeedState',lookup: { 1: 'Fragrance', 2: 'Price', 3:'Formulation',4:'Technolgy'} },
            { title: 'Keyword extracted', field: 'keyword' },
            { title: 'Actual Keyword', field: 'actual_keyword' },
            { title: 'Map score', field: 'map_score', type: 'numeric' },
            { title: '6 month mentions', field: 'six_month_mention'},
        ],
        data: [
            { NeedState: 1, keyword: 'mango', actual_keyword: 'apple', map_score: .3 ,six_month_mention:234},
            { NeedState: 2, keyword: 'expensive', actual_keyword: 'price', map_score: .6 ,six_month_mention:45},
            { NeedState: 2, keyword: 'costly', actual_keyword: 'price', map_score: .43 ,six_month_mention:433},
            { NeedState: 3, keyword: 'chemical', actual_keyword: 'oil', map_score: .43 ,six_month_mention:68},
            { NeedState: 4, keyword: 'humidifier', actual_keyword: 'diffuser', map_score: .63 ,six_month_mention:987},
        ]
        }
    }


    render() {
        return (
        
            

                {
                !this.state.editable ? 
                (
                    Run request for - {this.state.request_name}
                ):(
                    
                    
                        
                     
                      Caution: The dictionary is on edit mode. Any changes made will trigger a pipeline rerun with updated dictionary
                    
                )
                }
                
            }
            columns={this.state.columns}
            columns={[
            ...this.state.columns.map(data => {
                return {
                    field: data.field,
                    title: data.title,
                    isEditable: data["actual_keyword"] = false,
                    render: rowData => 
                        (
                             
                            {
                            data.field === "map_score" ?
                            (
                                
                                {
                                    rowData[data.field] > 0.8 ?
                                    
                                    : rowData[data.field] > 0.6 ?
                                     :
                                    
                                } 
                                
                            ):(
                                
                                {
                                    data.field === "NeedState" ?
                                    (
                                    
                                        {rowData["show_needstate"]}
                                    
                                    ):data.field === "show_needstate" ? (
                                    

                                    
                                    ) : (
                                    
                                        {rowData[data.field]}
                                    
                                    )
                                }

                                
                            )
                            } 
                            
                        )
                };
                })
        ]}
            data={this.state.data}
            editable={{
            onRowAdd: newData =>
                new Promise(resolve => {
                setTimeout(() => {
                    resolve();
                    this.setState(prevState => {
                    const data = [...prevState.data];
                    data.push(newData);
                    return { ...prevState, data };
                    });
                }, 1);
                }),
            onRowUpdate: (newData, oldData) =>
                new Promise(resolve => {
                setTimeout(() => {
                    resolve();
                    if (oldData) {
                    this.setState(prevState => {
                        const data = [...prevState.data];
                        data[data.indexOf(oldData)] = newData;
                        return { ...prevState, data };
                    });
                    }
                }, 1);
                }),
            onRowDelete: oldData =>
                new Promise(resolve => {
                setTimeout(() => {
                    resolve();
                    this.setState(prevState => {
                    const data = [...prevState.data];
                    data.splice(data.indexOf(oldData), 1);
                    return { ...prevState, data };
                    });
                }, 1);
                }),
            }}
        />
        );
    }
    }