enter image description here

This is my reactjs code with api data -> fetch

but not showing data in User interface. I used map funtion. it was not working.

enter image description here

Api data is already loaded (console log shows response data). But I can't show that data in user interface.

this is api responce data set.

response.data = {user_dream_id: 1, user_id: 1, dream_title: 'Heavenhgakls', dream_story: 'I saw the heaven dsadsa dsa sad', dream_datetime: '2022-11-14'}

I used axios api method

How to show api data in User interface 

Full Code .....

const Details = () => {
  const accessToken = localStorage.getItem("accessToken");
  const { dreamid } = useParams();
  const [dream, setUsers] = useState("");

  const fetchDreamData = async () => {
    const response = await axios.get(`/dreams/api/user-dreams/${dreamid}`, {
      headers: {
        Authorization: "Bearer "   `${accessToken}`,
      },
    });
    setUsers(response.data);
    // response.data = {user_dream_id: 1, user_id: 1, dream_title: 'Heavenhgakls', dream_story: 'I saw the heaven dsadsa dsa sad', dream_datetime: '2022-11-14'}
  };

  useEffect(() => {
    fetchDreamData();
  }, []);
  console.log(dream);

  return (
    <div>
      {dream.length > 0 && (
        <ul>
          {dream.map((dreams) => (
            <>
              <li key={dreams.user_dream_id}>{dreams.dream_title}</li>
            </>
          ))}
        </ul>
      )}
    </div>
  );
};

export default Details;

CodePudding user response：

You are setting an object in the state setUsers and accessing it like array inside div.

Put the response.data inside an array like

setUsers([response.data])