Infinite loop when using array map - reactjs

Question

Since I added
const dataList = dataSet.map(element => {
return <div>{element}</div>;
});
It has gone into an infinite loop but this line is also necessary for my program to display the notes so what can I do?
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import Navbar from './Navbar';
function Notes() {
//This is just a string because we are sending just one
//might have to make it an array at some point
const [notes, setNote] = useState(String);
var dataArr = [];
const [dataSet, setDataSet] = useState([]);
const [dataList, setDataList] = useState();
useEffect(() => {
console.log('Use Effect Notes.js');
axios
.post('/api/user/notes')
.then(res => {
dataArr = res.data[0].notes;
//console.log(dataArr) ;
console.log(dataArr);
setDataSet(res.data[0].notes);
})
.catch(err => {
console.log('it didnt work' + err);
});
console.log('The array that i got ');
});
const dataList = dataSet.map(element => {
return <div>{element}</div>;
});
/*const taskList = task.map((object , index)=>{
return <div className='row justify-content-center'>
<h2>{object}</h2>
</div>
});*/
function noteDown(event) {
event.preventDefault();
var newNote = {
notes: notes,
};
console.log('note down ' + newNote);
axios
.post('/api/user/notes/add', newNote)
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
}
function ffswork() {
console.log('ffswork');
}
return (
<div>
<div>
<h1> Notes </h1>
</div>
<form onSubmit={noteDown}>
<input
type="text"
placeholder="Note"
className="form-control"
value={notes}
onChange={e => {
setNote(e.target.value);
}}
/>
<input type="submit" value="AddNote" className="btn btn-primary" />
</form>
<button className="btn btn-primary" onClick={ffswork}>
getData
</button>
</div>
);
}
export default Notes;

Answer 1

I think you forgot to pass the array in the second argument from useEffect.
useEffect(() =>{
console.log("Use Effect Notes.js");
axios.post('/api/user/notes' ).then(res=>{
dataArr = res.data[0].notes ;
//console.log(dataArr) ;
console.log(dataArr);
setDataSet(res.data[0].notes);
}).catch(err=>{
console.log('it didnt work' + err);
});
console.log("The array that i got ");
}, []) // at this line
You can tell React to skip applying an effect if certain values
haven’t changed between re-renders.
So, if you want to make the request to get your data just once just after render, you just need to pass an empty array in the second argument of useEffect.
Read More here.