I am able to display data in a table. My problem is that date is coming with all the rows. date is same for every item. How to display date and FeatureName(same value) once in the table header for all the items.

{"FeatureID":"11","FeatureText":Feature2,"Date":"08/30/2011","FeatureName":"Research"},
{"FeatureID":"12","FeatureText":Feature3,"Date":"08/30/2011","FeatureName":"Research"},
{"FeatureID":"13","FeatureText":Feature4,"Date":"08/30/2011","FeatureName":"Research"}]

import React from "react";
export class DisplayFeatures extends React.Component {
constructor(props) {
       super(props);
       this.state = {
              FeatureID: "",
              Date: "",
              FeatureName
              FeatureText: "",
              Feature: [],
       }
}
       componentDidMount() {
              this.DisplayFeatures();
}
DisplayFeatures() {
              fetch(REQUEST_URL)
                     .then(response => response.json())
                     .then((data) => {
                            this.setState({
                                  Feature: data,
                                  loading: false
                           })
                     })
      }
       render() {
              return (
                     <div>
                           <form>
<table><tbody>
{this.state.Feature.map((item, index) => {
       return [
              <div>
                    <tr><td>
                           <font size="4" color="#FFFFFF"><b>{item.FeatureName}</b></font></td>
                           <td>
                           {item.date}</td></tr>
                          <td>{item.FeatureText}</td></tr></div>
       ];

})}</tbody>
</table>
</form>
</div>
              );
       }
}
export default DisplayFeatures;

CodePudding user response：

Use a library like lodash to group by date first, then render the list.

https://www.geeksforgeeks.org/lodash-_-groupby-method/

    import React from "react";
export class DisplayFeatures extends React.Component {
constructor(props) {
       super(props);
       this.state = {
              FeatureID: "",
              Date: "",
              FeatureName: "",
              FeatureText: "",
              Feature: [],
              FeatureGroupedByDate: [],
       }
}
       componentDidMount() {
              this.DisplayFeatures();
}
DisplayFeatures() {
              fetch(REQUEST_URL)
                     .then(response => response.json())
                     .then((data) => {
                            this.setState({
                                  FeatureGroupedByDate: _.groupBy(data, item => item.Date),
                                  Feature: data,
                                  loading: false
                           })
                     })
      }

You can also select the first item from the array to use as the header

CodePudding user response：

hi you can use this code

import React from "react";
export class DisplayFeatures extends React.Component {
constructor(props) {
   super(props);
   this.state = {
           FeatureID: "",
           Date: "",
           FeatureName: "",
           FeatureText: "",
           Feature: [],
           FeatureGroupedByDate: [],
       }
}
  componentDidMount() {
    this.DisplayFeatures();
  }
DisplayFeatures() {
     fetch(REQUEST_URL)
          .then(response => response.json())
           .then((data) => {
                 this.setState({
                 FeatureGroupedByDate: data.reduce(function(rv, x) {
                       (rv[x['Date']] = rv[x['Date']] || []).push(x);
                          return rv;
                 }, {}),
                 Feature: data,
                 loading: false
        })
    })
}

CodePudding user response：

Changes made:

1. Added initial loading state.
2. Changed Feature state to Features. (Plural, because it holds multiple feature data).
3. Created seperate state for FeatureName and FeatureDate
4. updating the FeatureName and FeatureDate during setSate call in the constructor.
5. Added loading state check in render function. (upto you to use a better loading animation.)

import React from "react";

export class DisplayFeatures extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          FeatureDate: "",
          FeatureName: "",
          Features: [],
          loading: true
        }
    }

    componentDidMount() {
        this.DisplayFeatures();
    }

    DisplayFeatures() {
        fetch(REQUEST_URL)
            .then(response => response.json())
            .then((data) => {
                this.setState({
                    Features: data,
                    FeatureName: data[0].FeatureName,
                    FeatureDate: data[0].date,
                    loading: false
                })
        })
    }

    render() {

        if(this.state.loading){
            return <div>Loading... </div>
        }else{
            return (
                <div>
                    <form>
                        <table>
                            <th> Feature: {this.state.FeatureName} Date: {this.state.FeatureDate}</th>
                            <tbody>
                                {this.state.Features.map((item, index) => {
                                    return 
                                    <>
                                        <tr>
                                            <td> 
                                                <font size="4" color="#FFFFFF"><b>{item.FeatureName}</b></font>
                                            </td>
                                            
                                            <td>
                                                {item.date}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>{item.FeatureText}</td>
                                        </tr>
                                    </>
                                })}
                            </tbody>
                        </table>
                    </form>
                </div>
            )
        }
    }
}
export default DisplayFeatures;