Typescript-React: array not visible as component

Question

todoApi.ts:

import axios, {AxiosResponse} from "axios";

const API_URL: string = "http://localhost:8080/api/v1/todo/";

export async function getTodos(filter: string): Promise<[]> {
    const response: AxiosResponse = await axios.get(API_URL, {
        headers: {
            filter: filter
        }
    });
    return await response.data;
}

Api response example:

[
    {
        "id": 1,
        "name": "Todo",
        "description": "Todo description",
        "done": false,
        "dateCreated": "2022-10-18",
        "deadline": "2022-10-19"
    },
    {
        "id": 2,
        "name": "Todo1",
        "description": "Todo1 description",
        "done": false,
        "dateCreated": "2022-10-18",
        "deadline": "2022-10-20"
    }
]

App.tsx: (excuse my bad naming conventions here)

import {getTodos} from "../api/todoApi";

let counter: number = 0;

export default function App(): JSX.Element {
    const [todos, setTodos] = useState([]);
 
    useEffect(() => {
        setInterval(() => {
            let _todos: ReactElement[] = [];

            getTodos(sessionStorage.getItem("search-key") as string).then((__todos) => {
                for (let i: number = 0; i < __todos.length; i++) {
                    const todo = __todos[i];
                    _todos.push(
                        <Todo key={counter} id={todo["id"]} name={todo["name"]}
                              description={todo["description"]}
                              dateCreated={todo["dateCreated"]} deadline={todo["deadline"]}
                              done={todo["done"] === "true"}/>
                    );
                    counter++;
                }
            });

            // @ts-ignore
            setTodos(_todos);
        }, 500);
    }, []);

    return (
        <>
            <div id={"todos"}>
                // some other components
                {todos}
                // some other components
            </div>
        </>
    );
}

The array of to-dos doesn't render although when going to react elements or logging the to-dos array I get the correct result.
Todo component just returns a div with class todo and an h1 for every prop.

Storing components in the state is almost a bad idea. Do you get any errors? — Konrad
– Konrad, Commented Oct 18, 2022 at 18:03
@KonradLinkowski no i dont get any.about storing components in state, im new to react and i thought that was the only way for me to access todos from useEffect to update every 500ms, like i have it in the code sample — George Athans
– George Athans, Commented Oct 18, 2022 at 18:07

gear4 · Accepted Answer · 2022-10-18 18:08:36Z

2

note: Storing your components in the state is a bad idea. Instead, store the data, and then map over the data to compose the components

Your issue is coming from the fact that you're loading the promise (.then) after you set your state (setTodos(_todos);) which means _todos is an empty array.

If you move the setTodos(_todos); below your for(){} loop, it will work. However, again, it is bad practice, and I urge you to continue research into better ways to do this :)

answered Oct 18, 2022 at 18:08

gear4

8447 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

George Athans Over a year ago

Thanks that fixed the issue.regarding my bad practice, im kinda new to react and didnt know.ill make sure to look into it.thanks for the help!

gear4 Over a year ago

@GeorgeAthans of course, not a problem :) hope you get far!

Collectives™ on Stack Overflow

Typescript-React: array not visible as component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related