Render list - React - Javascript

Question

I'm currently trying to render state

I see a few errors with declaring variables within the map loop.

Here is my attempt so far, Any help is welcomed

import React from "react";
import axios from "axios";

const transformHumanReadableDateToMessages = date => {
  let d = new Date(date);
  const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
  ];
  return {
    DayOfTheWeek: d.getDate(),
    Month: d.getMonth(),
    Day: days[d.getDay()],
    YearAtTime: d.getFullYear()
  };
};

export default class App extends React.Component {
  state = {
    messages: []
  };

  componentDidMount() {

    axios.get(`https://api.myjson.com/bins/10xva4`).then(res => {
      let result = res.data["messages"];
          result = Array.from(new Set(result.map(e => JSON.stringify(e))));
          result.reduce((accu, curr) => {
           curr.date = transformHumanReadableDateToMessages(curr["sentAt"]);
            accu.push(curr)
            return accu;
          }, []);

      this.setState({
        messages: result
      });
    });
  }

  render() {
return (
  <>
    { this.state.messages.map(message => 
       let d = new Date(date);
      const days = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday"
      ];
     <div className="container">
     <p>{message.content}<p/>
     <p>{message.senderUuid}</p>
     <p>DayOfTheWeek: {d.getDate()}
     <p>Month: {d.getMonth()}</p>
     <p>Day: {days[d.getDay()]}</p>
     <p>Year: {d.getFullYear()} </p>
     </div>
     )}
  </>
);

} }

For example each element in the JSON that is returned looks like this:

{
  "sentAt":"2012-11-13T17:29:37.003Z",
  "uuid": "435453",
  "content": "1",
  "senderUuid": "2"
 }

I want to make the date more readable then add it to the element for a output like this:

{
 "sentAt":"2012-11-13T17:29:37.003Z",
 "uuid": "435453",
 "content": "1",
 "senderUuid": "2",
 "DayOfTheWeek": 22,
  "Month": 4,
  "Day": 'Friday',
  "YearAtTime": 2015
 }

Why, though? That information is directly derived from the sentAt and/or current date property, why not only generate the values you need for display purposes during render(), which is the function that creates the actual bits users see? E.g. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Feb 18, 2020 at 19:30
I want to add more properties because later I want to had a button to sort the dates in either ascending or descending order using the sentAt value, instead of trying to rely on another function or handler when I render the sate @Mike'Pomax'Kamermans — bruce
– bruce, Commented Feb 18, 2020 at 19:38
Okay, but... why would that matter? If you order by sentAt, the real code that's going to be in your render() will still yield the same derived values. Your sorting reorders the messages array (not in render(), in your handler for toggling sorting, using setState), and render then blindly regenerates the UI based on the updated this.state.messages array. That's how React works: you update the state in response to user actions, and render() renders your UI based on the updated state. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Feb 18, 2020 at 19:42
@Mike'Pomax'Kamermans okay I updated the question and code but still see errors — bruce
– bruce, Commented Feb 18, 2020 at 20:29

SILENT · Accepted Answer · 2020-02-19 08:19:37Z

Its because you are using let and jsx interchangeably due your mismanagement of brackets. Since it was a mess, I rewrote it using codesandbox and React hooks.

https://codesandbox.io/s/trusting-nobel-vlo34

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

const days = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday"
];
export default function App() {
  const [messages, setMessages] = useState([]);
  useEffect(() => {
    axios
      .get(`https://api.myjson.com/bins/10xva4`)
      .then(({ data: { messages } }) => setMessages(messages));
  }, []);
  const Display = messages.map(({ content, senderUuid, sentAt }, index) => {
    let d = new Date(sentAt);
    return (
      <div className="container" key={index}>
        <p>Content: {content}</p>
        <p>SenderUuid: {senderUuid}</p>
        <p>DayOfTheWeek: {d.getDate()}</p>
        <p>Month: {d.getMonth()}</p>
        <p>Day: {days[d.getDay()]}</p>
        <p>Year: {d.getFullYear()}</p>
      </div>
    );
  });
  // console.log({ messages });
  return <div className="App">{Display}</div>;
}

ArtDev · Accepted Answer · 2020-02-18 21:14:49Z

I can say you would need to understand map function properly. Also, how to handle logic inside JSX.

First, You need to add return() function inside the map() function. As long as you don't return all your content inside the map() function, anything will not be rendered.
- Second, You need to split variable assign outside of return function. So that return() inside map() function will only have JSX element. and other logic will be outside the return function body. Please take a look at the below code.
- Third, You also need to fix your typo for
  tags in the map functions.

<p>{message.content}<p/> <--- here typo : fix as </p>

<p>DayOfTheWeek</> doesn't have proper closing tag.

And last, You will need to handle if message is an empty array. so that, if the message state is an empty array, you should render something else.

The below example handles it.

import React from "react";
import "./styles.css";

 export default class App extends React.Component {
   state = {
    messages: []
   };

  componentDidMount() {
    //... your api call here
  }

render() {
  const { messages } = this.state;

  if (messages.length === 0) {
    return <p>No Message Found</p>;
  }

  messages.map(message => {
    let d = new Date();
    const days = [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday"
    ];

    return (
      <div className="container">
        <p>{message.content}</p>
        <p>{message.senderUuid}</p>
        <p>DayOfTheWeek: {d.getDate()}</p>
        <p>Month: {d.getMonth()}</p>
        <p>Day: {days[d.getDay()]}</p>
        <p>Year: {d.getFullYear()} </p>
      </div>
    );
  });
}

}

the code doesn't appear to work Current error App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Collectives™ on Stack Overflow

Render list - React - Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related