CODEWITHSUNDEEP
reactjs
rjc30
rjc30

Reputation: 247

Data from the backend is not appearing when you assign it into new object on the front end

Question, I have this list of task coming from my backend, I dunno why my data is not appearing when I assign this to new object. I'm planning to create a drag and drop task component.

Datas enter image description here

const BoardView = ({ datas, showTask, taskInfo }) => {
const [filteredList, setFilteredList] = useState(datas);

const listColumns = {
    [uuidv4()]: {
      name: 'Proposed',
      items: filteredList,
    },
    [uuidv4()]: {
      name: 'In Progress',
      items: [],
    },
    [uuidv4()]: {
      name: 'Review',
      items: [],
    },
    [uuidv4()]: {
      name: 'Done',
      items: [],
    },
  };

console.log(datas) => data is appearing
return (
    <>
      <div className='w-full p-8 grid grid-flow-col grid-cols-4 gap-8'>
        <DragDropContext
          onDragEnd={(result) => onDragEnd(result, columns, setColumns)}
        >
          {Object.entries(columns).map(([columnId, column], index) => {
            return (
              <div
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                }}
                key={columnId}
              >
                {console.log(column.item)} => there's no data
              </div>
            );
          })}
        </DragDropContext>
      </div>
    </>
  );
};

Output

enter image description here

Upvotes: 1

Views: 542

Answers (1)

Ankit Sanghvi
Ankit Sanghvi

Reputation: 527

Your API endpoint is being hit when you are loading the component. Currently your component is loaded whilst the data is not yet fetched. So we'll fetch the data and then render the component
For this, wrap the logic for fetching the data in a useEffect hook - where you do 2 things -

  1. Fetch the data
  2. Populate the state with fetched data

Something like :

const BoardView = ({ datas, showTask, taskInfo }) => {
    const [filteredList, setFilteredList] = useState(datas);
    
    const listColumns = {
        [uuidv4()]: {
          name: 'Proposed',
          items: filteredList,
        },
        [uuidv4()]: {
          name: 'In Progress',
          items: [],
        },
        [uuidv4()]: {
          name: 'Review',
          items: [],
        },
        [uuidv4()]: {
          name: 'Done',
          items: [],
        },
    };
    
    useEffect(async () => {
        // 1. => Fetching the data using "fetchAPI" or "axios". I have chosen axios as it is easier to work with
        const results = await axios.get('API__ENDPOINT')
        
        // 2. => Populate the state of this current component with fetched data 
        setFilteredList(results)
    },[results])
    
    console.log(datas) => data is appearing
    return (
        <>
          <div className='w-full p-8 grid grid-flow-col grid-cols-4 gap-8'>
            <DragDropContext
              onDragEnd={(result) => onDragEnd(result, columns, setColumns)}
            >
              {Object.entries(columns).map(([columnId, column], index) => {
                return (
                  <div
                    style={{
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                    }}
                    key={columnId}
                  >
                    {console.log(column.item)} => there's no data
                  </div>
                );
              })}
            </DragDropContext>
          </div>
        </>
      );
    };

Upvotes: 1

Related Questions