How to value format from api in react data grid?

I have my data grid in render and this.state.rows and this.state.columns
I want to change one of the columns’ value from another api.

This is where getting the value of column and it is working.

const DataFormatter = ({ value }) => { <span>{value}</span> });

I want to change the value of column from an id to the name.
Here is the data object look like:

const data = {
    value: 3242;
    name: somename;
}

My new DataFormatter logs the name but doesn’t render anything. It may return as an array is needed for object children. or object promise issue.

const DataFormatter = ({ value }) => { 

    const newValue = fetch("domain.name/{value}")
        .then(response=> response.json())
        .then(data => {
            console.log(data.name)
            return <span>data.name</span>
        });

});

2 thoughts on “How to value format from api in react data grid?”

  1. I don’t know where are you using DateFromatter but you are probably returning him in render of some other component.

    With that in mind, you can’t wait a fetch request to finish before return the value, so what you need to do is write the DateFormatter as a class, return null while you data is not fetched yet and do your fetch request in componentDidMount.

    Something like that

    class DateFormatter extends React.Component {
      constructor () {
        this.state = {
          name: null,
        };
      }
    
      componentDidMount () {
        fetch("domain.name/{this.props.value}")
          .then(response=> response.json())
          .then(data => {
              console.log(data.name)
              this.setState({name: data.name});
          });
      }
    
      render () {
        return <span>{this.state.name}</span>
      }
    }
    
    Reply
  2. In My case, we need to format the country code in Capes letter for that I did in the following way

    const DataFormatter = ({ value }) => { return <span style={{textTransform: 'uppercase'}}>{value}</span> };
    
    const columns = [
      { key: "countryCode", name: "Country", editable: false, width:75,formatter:DataFormatter }
    ];
    
    Reply

Leave a Comment