Search for a command to run...
No comments yet. Be the first to comment.
A quick analysis of the top 25 CWEs in the last 5 years show a repeating pattern
JavaScript is a scripting language, therefore you can write scripts to automate your workflow with JavaScript. The background of the snippet I created a node script recently to automate one workflow that I do repeatedly. Every time I create a new Jav...
In this article, you will learn to build a Markdown parser which compiles into HTML with JavaScript and Regular Expression Markdown is a markup language like HTML. It is quite popular among developers to write blogs, readme files, and documentation. ...
Handling error in express applications can be more challenging than building web applications and APIs Building web applications or APIs with express.js is not difficult in my opinion. I think it is more difficult to handle errors, error status codes...
This blog is a follow-up to my last blog in which I talked about promises. If you are unfamiliar with promises in JavaScript, please read that article before reading this one. Also, some familiarity with exception handling would be useful. Async Awai...
A state in react doesn't have a type. A counter can hold a value of a number at an instance and it can be changed into something else like a string in another instance. Doing this causes no errors and there isn't one either.
Though this doesn't raise an error, an error might arise later unintentionally. Once I was building an app that made an API request to a server and the API returned an array of items. I looped over the array of objects using the map method that exists in the Array prototype. I had initially assigned the state for items object to be a string.
const App = () => {
const [items, setItem] = useState("")
useEffect(() => {
/*
* Make an API call
* Set the new state to be the response from API call
*/
}, [])
return (
<div>
<ul>
{items.map(item => (
<li>{item.name}</li>
))}
</ul>
</div>
)
}
For simplicity, I have created a dummy data that I might get as a response from an API. In order to simulate the feel of a real API responding to an AJAX request, I have created a setTimeout that resolves after 3 seconds.
const dummyData = [
{
id: 1,
name: "Smith",
},
{
id: 2,
name: "Dan",
},
{
id: 3,
name: "Prashant",
},
]
useEffect(() => {
setTimeout(() => setItems(dummyData), 3000)
}, [])
On the surface, this code looks normal but it's not. The problem lies here
const [items, setItem] = useState("")
I have initially assigned items to be an empty string. Now if we see the return statement, I have mapped over items (which I expect to be an array). The value of items is an array only after the network request is resolved and the items is set to the new value we get from the API.
return (
<div>
<ul>
{items.map(item => (
<li>{item.name}</li>
))}
</ul>
</div>
)
Initially when items = '', items.map fails to execute because map method doesn't exist on a string.
You should always declare/initialize your state carefully. If you know the response you're going to get from an API request then assign it to be the type you're going to get.
So you could do something like this
const [items, setItem] = useState([])
Just a minor change from '' to [] would save me hours of random google searches and scratching my head.
I hope you like the blog. If it was worth your time then please consider subscribing to not miss future updates.