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
 }

Answer 1

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>;
}

Answer 2

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>
    );
  });
}

}