render state in map function and add some style react js

Question

i want to add some style to state with map function and finally add items in table i use this code

    columnClassNameFormat(fieldValue ) {
    const Event =this.state.Event;
    console.log(Event);

    this.state.Event.events.map(function (item) {
        if (item.event_type === 'A') {

         <span class="label label-danger">{fieldValue}</span>
        }
        else if (item.event_type === 'W') {
        <span class="label label-warning">{fieldValue}</span>
        }
        else if (item.event_type === 'I') {
            <span class="label label-info">{fieldValue}</span>
        } else {
          <span class="label label-info">{fieldValue}</span>
        }
    }).bind(this)


 }

and after that i show items in table like that

<BootstrapTable data={this.state.Event}  exportCSV title='Infravision-Report' pagination search>
                        <TableHeaderColumn dataField='event_title' isKey={ true }>Discription</TableHeaderColumn>
                        <TableHeaderColumn dataField='time' dataSort={ true }>Date time</TableHeaderColumn>
                        <TableHeaderColumn dataField='event_status' columnClassName={this.columnClassNameFormat } >status</TableHeaderColumn>


                    </BootstrapTable>

but its not work and style not add to items

Put return statement .... return this.state.Event.events.map(...) — Ritwick Dey
– Ritwick Dey, Commented May 19, 2018 at 5:18
Possible duplicate of Deep-nested-array-of-objects-not-rendering — Shubham Khatri
– Shubham Khatri, Commented May 19, 2018 at 6:53

Rohith Murali · Accepted Answer · 2018-05-19 07:52:14Z

0

Your map function should have return statements like,

this.state.Event.events.map(function (item) {
        if (item.event_type === 'A') {

         return <span class="label label-danger">{fieldValue}</span>
        }
        else if (item.event_type === 'W') {
        return <span class="label label-warning">{fieldValue}</span>
        }
        else if (item.event_type === 'I') {
           return  <span class="label label-info">{fieldValue}</span>
        } else {
         return  <span class="label label-info">{fieldValue}</span>
        }
    }) .bind(this)

edited May 19, 2018 at 7:52

answered May 19, 2018 at 6:27

Rohith Murali

5,6692 gold badges27 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rohith Murali Over a year ago

I havent added the .bind from your question. Edited my answer now. please try the latest

Rohith Murali Over a year ago

Please accept it as answer if you find this as a solution for the stack overflow community and upvote if you find it useful

Collectives™ on Stack Overflow

render state in map function and add some style react js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related