Changing text depending on the value returned from the Reactjs table api

Question

I created a table using the Reacttable component and am feeding it data from an api. One of these data returns as 0 or -1 and I want to treat them so that if it comes 0 it appears "Enabled" in the table, if it is -1 it is "Disabled". I’m new to Reactjs and I don’t really know how to do it, you can give me a hand?

Follows the code:

class DataTable extends Component{

    constructor(props){
        super(props);

        this.state = {
          dadosGrupo:'',
        }

        this.state = {
          isShowing: false
        }

        this.state = {
          status:''
        }  

      }

  componentDidMount(){
    const url ='http://xxx'
    fetch(url, {
      method: 'GET'
    }).then(response => response.json())
      .then(dados => {
      this.setState({dadosGrupo: dados})
    })
    .then(Inativo => {this.setState({status:Inativo})})


  }

  openModalHandler = () => {
    this.setState({
        isShowing: true
    });
}

closeModalHandler = () => {
    this.setState({
        isShowing: false
    });
} 



    render(){

        const columns = [
            {
              Header: "Status",
              accessor: "Inativo",
              style:{
                textAlign:"center",
                color:'white',
                  },
                width:100,
                maxWidth:100,
                minWidth:100,
                Cell: props => {
                  return(
                    <div>
                {this.state.inativo === 0 ? <div style={{color:'green'}}>Ativado</div> : <div style={{color:'red'}}>Desativado</div>}
                    </div>
                  )
                }


            },

            {
              Header: "Cdgrupo",
              accessor: "Cdgrupo",
              style:{
                  textAlign:"center"
                    },
                  width:100,
                  maxWidth:100,
                  minWidth:100,

                },      

            {
             Header: "Grupo",
             accessor: "Grupos",
             sortable: false
           },
           {
             Header: "Ação",
             sortable: false,
             filterable:false,
             width:100,
             maxWidth:100,
             minWidth:100,
             style:{
                 textAlign:"Center"
             },
             Cell: props =>{
                 return(
                   <div>
                   {this.state.isShowing ? <div  className="backdrop2"  ></div> : null }
                     <button className='modaleditar btn btn-info' onClick={this.openModalHandler}>Editar</button>
                   </div>
                 )

             },

           },
          ]

        return(
            <div>
    <ReactTable

    columns={columns}
    data={this.state.dadosGrupo}
    filterable
    defaultPageSize={10}
    noDataText={"Não foi possível carregar os dados."}
    >

    </ReactTable>

    <ModalEdit
            className="modal"
            show={this.state.isShowing}
            close={this.closeModalHandler}>

           </ModalEdit>

    </div>
        )
    }
}

export default DataTable;

The status I created in state and the parole within Columns was just to test this condition, I imagine it is for her that it will be done right?

The table is returning like this:

If you need more information just say!

Answer 1

You need to resolve this issue as described in the component documentation React-table which is by resolveData as a minimum example shown below:

const columns = [
        {
            Header: 'Name',
            accessor: 'name'
        },
        {
            Header: 'Status',
            accessor: 'status'
        }
    ];

    const data = [
        {
            name: 'Tanner Linsley',
            status: 1,
        },
        {
            name: 'Geovana Sturt',
            status: 0,
        }
    ];  

<ReactTable 
    data={data}
    columns={columns} 
    resolveData={r => r.map((item) => {
        return {name:item.name, status:item.status===1?'Ativado':'Desativado'};
    })}
/>

Observing: if by chance you need to touch only one item and need to copy the rest do as follows:

return {...item, status:item.status===1?'Ativado':'Desativado'};

where ...item copies the original object and changes only what it needs, or even creates a new item in that object.