[Solved] What is the problem with my code that makes it repeat 5 times

by


Remove obj(keys) (it creates an unnecessary additional loop) and instead just simply map over this.state.value. Then use a unique property for the key (ideally this should be an id that was assigned by your database).

import React, { Component } from "react";

class App extends Component {
  state = { value: [{ id: "b5dc-58f6-u3ga-fbb4", title: "my title", category: "action", replies: "62", views: "26k", activity: "18h" }] };

  render = () => (
    this.state.value && this.state.value.length > 0 // if value exists and is greater than 0...
      ? this.state.value.map(({ id, title, category, replies, views, activity }) => ( // map over value array and deconstruct the properties (eliminates the need to do value.title, value.category...etc)
          <div key={id}>
             {title}&emsp;&emsp;{category}&emsp;&emsp;{replies}&emsp;&emsp;{views}&emsp;&emsp;{activity}
          </div>
         ))
        : null // otherwise, show null if this.state.value is empty
   )
} 

export default App;

0

solved What is the problem with my code that makes it repeat 5 times