In my react project, I have an array of objects where I want to get the value of a key in the array and store it inside a separate state then map it out and use the values in my project. In this case, I want to get the first 10 strings in the delivery_time_frame. I'm using substr to store the value inside an empty array after filtering but my code is not working at the moment.

Here is my code at the moment and the codesandbox here codesandbox

import "./styles.css";
import React, { useEffect, useState, useRef } from "react";

export default function App() {
  const Defaultdata = [
    {
      date_listed: "4 hours ago",
      id: "7857699961",
      delivery_time_frame: "2021-10-25 - 2021-11-14",
      distance: "22.8 km",
      time_stamp: "2021-10-25 16:36:54",
      watched: "yes"
    },
    {
      date_listed: "3 days ago",
      id: "8358962006",
      delivery_time_frame: "2021-10-18 - 2021-10-24",
      distance: "4.3 km",

      time_stamp: "2021-10-22 16:54:12"
    },
    {
      date_listed: "4 hours ago",
      delivery_id: "8146462294",
      delivery_time_frame: "2021-10-25",
      distance: "4.3 km",
      time_stamp: "2021-10-25 16:12:32"
    },
    {
      date_listed: "4 hours ago",
      delivery_id: "8146462294",
      delivery_time_frame: "2021-10-25 - 2021-10-31",
      distance: "4.3 km",
      time_stamp: "2021-10-25 16:12:32"
    },

    {
      date_listed: "4 hours ago",
      delivery_id: "8146462294",
      delivery_time_frame: "2021-10-25 - 2021-11-14",
      distance: "4.3 km",
      time_stamp: "2021-10-25 16:12:32"
    }
  ];

  const next_level2 = Defaultdata.filter((d, i) => {
    return d.delivery_time_frame.substr(0, 10);
  });

  const [specificdatevalues, setspecificdatevalues] = useState([]);

  useEffect(() => {
    setspecificdatevalues([...specificdatevalues, next_level2]);
  }, []);

  return (
    <div className="App">
      {specificdatevalues.map((dates, i) => (
        <li>{dates}</li>
      ))}
    </div>
  );
}

CodePudding user response：

Ok, so you have a few problems here.

Critical issues:

• You are trying to render an entire object inside an element.
• You forgot to spread next_level2 when you set the state,
  resulting in a 2 dimensional array.

Unrelated issues:

• Would suggest sticking to camel-case naming conventions.
• Should add a key value whenever you render in a loop function.

With some fixes it should look like this:

  // Would suggest sticking to camel-case naming conventions.
  const [specificDateValues, setSpecificDateValues] = useState([]);

  useEffect(() => {
    // You forgot to spread `next_level2`, resulting in a 2D array.
    setspecificdatevalues([...specificDateValues, ...next_level2]);
  }, []);

  return (
    <div className="App">
      {specificDateValues.map((dates, i) => (
        // You can't simply render an object like this.
        // Should add a `key` value whenever you render in a loop function.
        <li key={i}>
           <span>{dates.time_stamp}</span>
           <span>{dates.distance}</span>
           <span>{delivery_time_frame}</span>
           ...
        </li>
      ))}
    </div>

There are some structural changes I would make in terms of better practices, etc..
I'd say this is just good enough to make whatever you're trying to do here work.
Other than that I would suggest to keep learning, practicing and following known conventions and methods.

CodePudding user response：

I think you want to use .map() rather then .filter() in when obtaining next_level2. This way you will have dates in your new array. Also, set state just with next_level2 since this spreading of previous state has no sense in this piece of code and is not a good practice (if you want to use prevSomeState put a callback in setSomeState).