React todolist showing empty-CodePudding

When the user clicks the component I make a get request to my fetch_description which returns this exact response :

[{"Descrizione":"test1"},{"Descrizione":"test2"}]

What I want is to take what's in the response and put that into my modal. In my console.log(result.data) the data is shown correctly, so I think my issue is in operationList.js, in the map function but I don't understand what is wrong there.

However the modal I get is showing empty lists

 <li>

My code is here:

Calendar.js

const Calendar = () => {

  const [show, setShow] = useState(false);
  const [operations, listOperations] = useState([]);

  return (
    <>
    <FullCalendar
      plugins={[listDayPlugin]}
      timeZone="local"
      locale="it"
      initialView="listDay"
      events="http://localhost:5000/parse_appointments"
      eventClick =
      {
        function(arg){
          Axios.get("http://localhost:5000/fetch_description", {
            params: {
              id: arg.event.id
            }
          })
          .then(
            (result) => {
              listOperations(result.data);
              setShow(true);
              console.log(result.data);
            }
          )
          .catch(err => console.log(err))
        }
      }        
    />

    <Modal show={show} onHide={() => setShow(false)}>
        <Modal.Header>Hi</Modal.Header>
          <Modal.Body>    
            <div>
            { operations ? 
              
              (
                <TodoList operations={operations}/>
              ) 
              
              : 
              
              (
                  <h1> Loading</h1>
              )
            }
            </div>
          </Modal.Body>
        <Modal.Footer>This is the footer</Modal.Footer>
      </Modal>
  </>
  );
};

export default Calendar;

operationList.js

const TodoList = ({ operations }) => {
  return (
    <ul>
      {operations.map((operation) => (
        <li
          key={operation.Descrizione}
        >
        </li>
      ))}
    </ul>
  );
};

export default TodoList;

CodePudding user response：

Your "operations" variable is initialized as null, which does not include the "map" function.

you can simply initialize it as an empty array in your useState function call like this :

  const [operations, listOperations] = useState([]);

also you are not displaying anything inside your "li" tag, the "key" property does not render any text, you have to put it inside your tag, like this :

const TodoList = ({ operations }) => {
  return (
    <ul>
      {operations.map((operation) => (
        <li
          key={operation.Descrizione}
        >
            {operation.Descrizione}
        </li>
      ))}
    </ul>
  );
};

export default TodoList;

your callback after Api Call is also looking a bit wrong, all your code should be in the callback function, like this :

.then(
  (result) => {
    listOperations(result.data);
    setShow(true);
  }
)

CodePudding user response：

since you are setting the values after API call (which is asybchronous), you need to handle the null values also

const TodoList = ({ operations }) => {
  return (
    {operations?.length > 0 && <ul>
      {operations.map((operation) => (
        <li
          key={operation.Descrizione}
        >
        </li>
      ))}
    </ul>}
  );
};

CodePudding user response：

This looks a bit wrong:

.then(
   (result) => {listOperations(result.data)},
   setShow(true)
)

What it should be is:

.then(
  (result) => {
    listOperations(result.data);
    setShow(true);
  }
)

CodePudding user response：

Pretty embarrassing but I got the error:

In my operationList.js I had

    <li key={operation.Descrizione}>
    </li>

Which basically created emptpy lists, so I changed to:

    <li key={operation.Descrizione}>
      {operation.Descrizione}
    </li>