Component returned from .map() not loaded in DOM
IWI
I'm trying to load some components into the DOM after a getcall . The console will confirm that the component is loaded into the variable, but the DOM will not be updated. Is there a grammar problem
const Blog: FC<BlogProps> = ({title, url}): ReactElement => {
let response = [];
let Posts = [];
const {isDarkMode} = useContext(ThemeContext);
function fetchBlogs(){
let url = url;
let count = 30;
axios({
method: 'post',
url: '/api/grabIt',
data: {
url: url,
count: count
}
})
.then(function (res) {
response = res.data.response;
Posts = response.map(async function (item, i) {
return (<li><Post category={item.type} title={item.title} author={item.by} image={item.url} link={item.url} key={i}/></li>)
})
})
.catch(function (error) {
console.log(error)
});
}
return (
<>
<div>
<Button buttonColor={!!isDarkMode}
onClick={fetchBlogs}
>FETCH</Button>
<ul>
{Posts}
</ul>
</div>
</>
)
};
export default Blog
I've also tried just creating an array that is defined when the component loads (not after) and the DOM still won't update. i'm just empty<ul>
Dean
const Blog: FC<BlogProps> = ({ title, url }): ReactElement => {
let response = [];
const { isDarkMode } = useContext(ThemeContext);
const [list, setList] = React.useState([]);
function fetchBlogs() {
let url = url;
let count = 30;
axios({
method: 'post',
url: '/api/grabIt',
data: {
url: url,
count: count
}
})
.then(function (res) {
setList(res.data.response);
})
.catch(function (error) {
console.log(error)
});
}
return (
<>
<div>
<Button buttonColor={!!isDarkMode}
onClick={fetchBlogs}
>FETCH</Button>
<ul>
{list.map((item, i) => {
return <li key={`row-${i}`}>
<Post category={item.type} title={item.title} author={item.by} image={item.url} link={item.url} key={i} />
</li>;
})}
</ul>
</div>
</>
)
};
export default Blog