how to display data dynamically in react JS?

Question

I trying to get data from API and it's work fine but when no data or one data is different when have 2 and higher data. I trying to use map method but have a undefined error. I need to display data from API in three way:

1. when no data to display
2. when have a data that does not exist array
3. when have array

This is my code :

class ForsatView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                {
                    id: this.props.auth.FormInfoList.FormInfo.CrmId,
                    name: this.props.auth.FormInfoList.FormInfo.ExtendedProperties.BaseCrmObjectExtendedPropertyInfo[2],
                    repairsReport: this.props.auth.FormInfoList.FormInfo.ExtendedProperties.BaseCrmObjectExtendedPropertyInfo[4],
                    serialNumber: this.props.auth.FormInfoList.FormInfo.ExtendedProperties.BaseCrmObjectExtendedPropertyInfo[8],
                    model: this.props.auth.FormInfoList.FormInfo.ExtendedProperties.BaseCrmObjectExtendedPropertyInfo[17],
                    face: this.props.auth.FormInfoList.FormInfo.ExtendedProperties.BaseCrmObjectExtendedPropertyInfo[7],
                    situation: this.props.auth.FormInfoList.FormInfo.ExtendedProperties.BaseCrmObjectExtendedPropertyInfo[1],
                    fistly: this.props.auth.FormInfoList.FormInfo.ExtendedProperties.BaseCrmObjectExtendedPropertyInfo[0],
                    transport: this.props.auth.FormInfoList.FormInfo.ExtendedProperties.BaseCrmObjectExtendedPropertyInfo[16],
                    reciveDate: this.props.auth.FormInfoList.FormInfo.ExtendedProperties.BaseCrmObjectExtendedPropertyInfo[15],
                },
            ],

        }
    }
    componentDidMount() {
        store.dispatch(allForsat())
    }
    static propTypes = {
        isAuthenticated: PropTypes.bool,
        auth: PropTypes.object.isRequired,
    }
    render() {

        return (
            <Container>
                <div className="panel-content">

                    {this.state ? <div className="mt-5">No service</div>
                        :
                        <div className="mt-4 tab-profile-collaps text-right">
                            {this.state.data.map((details, index) =>
                                <Collapsible key={index}
                                    trigger={details.name.Value}>
                                    <div className="row">
                                        <div className={"col-lg-6 col-12"}>
                                            <div className="forsat-detial-wrapper">
                                                <div className={"title-tech-advice"}>
                                                    <h5>
                                                        Report
                                                    </h5>
                                                    <p>
                                                        {details.name.Value}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                        <div className={"col-lg-6 col-12"}>
                                            <div className="forsat-detial-wrapper">
                                                <div className="forsat-detial-wrapper-boxes">
                                                    <p>Date</p><span
                                                        className="d-flex">{details.name.Value}</span>
                                                    <p className="mt-3">Nameر</p><span
                                                        className="d-flex">{details.name.Value}</span>
                                                    <p className="mt-3">SerialNymber</p><span
                                                        className="d-flex">{details.name.Value}</span>
                                                    <p className="mt-3">Model</p><span
                                                        className="d-flex">{details.name.Value}</span>
                                                    <p className="mt-3">Details</p><span
                                                        className="d-flex">{details.name.Value}</span>

                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </Collapsible>
                            )}

                        </div>
                    }

                </div>
            </Container>
        );
    }
}
export default withRouter(ForsatView)

Answer 1

Well first I'd advise you to cleanup a bit your component and seperate it to multiple ones to avoid pyramidGade in the middle of it, just to make it easier for others to read and understand.

Now, regarding your issue, you can send your fetched data to another component and let it handle it like so: if empty return a <p> tag with a string to display no data or somthing else more appropriate, if array inside is empty do something similar again, and if real and presentable data just return the component that's filled with the data.

example for handling component:

const stuffToPrint = ({apiData}) => {
    return (apiData) ? 
    <p>No data</p>
    :
    (apiData.array) ?
        <p>array empty</p> 
        :
        <informativeComponent data={apiData.array}/>
        ;
    ;
}

Answer 2

this method work for me I use React Hook, you can convert it to componentDidMount function

import React, { useState, useEffect } from "react";

export default function Homepage() {
  const [arrayData, setArrayData] = useState([]);

  // Component Did Mount
  useEffect(() => {
    // GET DATA FROM API TO 'arrayData'
    // axios or api ...
    // fill it to 'arrayData'
  });

  if (!arrayData || arrayData.data) return <p>Not have data</p>;

  return <div>Render HTML</div>;
}