React : How to Show Message if there is no records

Question

I am working on project in ReactJS, I am fetching data from server through API. I did some search filtration, I want to display message if there is no records available? I am beginner to ReactJS and don't have much knowledge related to ReactJS.

Code:

        class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

score 3 · Answer 1 · answered Mar 14 '19 at 19:47

3

You can check when you get the data back and set an error if no data:

  getData(){
    const {Item,skip}=this.state;
    axios.get(`http://localhost:8001/parties?filter[limit]=${Item}&&filter[skip]=${skip}`)
    .then(response=>{
      console.log(response.data);
      if (!response.data.length) {
        this.setState({noData: true}) 
      } else {
        this.setState({
          data:response.data, noData: false
        })
      }
    })
  }

Then in your render function:

render() {
  if (this.state.noData) {
    return <p>No Data was returned!</p>;
  }
  ...

answered Mar 14 '19 at 19:47

jsdeveloper

3,945
1
15
14

Actually , It not working . I want that if there is no data in array I want to show message . – Jon Mar 14 '19 at 19:55
I want to set error on search filter , if there is no data in array – Jon Mar 14 '19 at 19:59
Ok in render() just check if this.state.filteredData has any results. If not, add an error message in the render output. – jsdeveloper Mar 14 '19 at 20:29
Tried but still not working ! Can you please edit your answer and write exact code ? Thanks – Jon Mar 14 '19 at 20:38
2

Jon - I think you need to take the time to try to understand the technologies you are working with. What will you learn if others write the solution every time? – jsdeveloper Mar 14 '19 at 20:44

Jean Rauwers · Answer 2 · 2019-03-14T19:58:07.687

You could check for the data before render the component and return another component if you don't have any. Using expressions such This example ‘’’ { doIHaveData ? < Component1 /> : < Component2 />} ‘’’

Where Component1 has your functionality and Component2 return a message or a spinner loader whatever you want .

I hope it helps!

When you are checking for the empty array you could check for array type and length. I would personally do something like

 {Array.isArray(array) && array.length === 0 ? <component1/> : <component2/>}

Shad · Answer 3 · 2019-03-14T19:52:40.547

1

You can make use of conditional rendering!

render(){
const filteredItems = this.getDataItems(this.state.filtered);
const dataItems = this.getDataItems(this.state.data);

if(dataItems){
return(
 <div>Your Message</div>
)
}
else{
//Your normal code

}
}

edited Mar 14 '19 at 19:52

answered Mar 14 '19 at 19:46

Shad

1,185
1
12
27

score 0 · Answer 4 · answered Mar 14 '19 at 19:45

I think a nice way would be to make your back end return a error message when there are no records to display. You could use .catch after your axios.get().then() function to see if there are any errors returned by back end and then display it to the user.

Look: What is the proper REST response code for a valid request but an empty data?

score 0 · Answer 5 · answered Mar 14 '19 at 19:46

You can add your message as another conditional wherever you'd like:

{this.state.filtered.length === 0 && (
  <div>Your Message</div>
)}

Or if you're trying to add a message for getting no results at all, then:

{this.state.allData.length === 0 && (
  <div>Your Message</div>
)}

React : How to Show Message if there is no records

5 Answers5

Linked

Related