CODEWITHSUNDEEP
javascriptreactjswebreact-hooks
Prashant Goyal
Prashant Goyal

Reputation: 33

React.js array .push() is taking multiple values

I am working on a simple blog website as my first Web Dev project. In the page where I write a blog, I am using a simple svg icon with an onClick listener to add a paragraph to the blog. This works like Medium where when you click on the "+" icon, it adds a new paragraph for you to write. Here is the code of my onClick event listener function:

function addNewPara() {
        // let newContent = {
        //     date: blogContent.date,
        //     author: blogContent.author,
        //     title: blogContent.author,
        //     contentArray: blogContent.contentArray.push("")
        // };
        // setBlogContent(newContent);

        setBlogContent(prevValue => {
            prevValue.contentArray.push("")
            return {
                ...prevValue,
            }
        });
    }

This has two ways where I update the state value. The issue here is that when I click the plus icon and this method is triggered, it pushes two empty strings into the contentArray key.

If I uncomment and switch to the other method, I get the following error: TypeError: blogContent.contentArray.map is not a function

The TypeError occurs where I am using the array to render the relevant HTML elements. What could be the issues behind this?

Upvotes: 0

Views: 993

Answers (1)

Erfan HosseinPoor
Erfan HosseinPoor

Reputation: 1077

this should be your setable method

setBlogContent({...blogContent, contentArray: [...blogContent.contentArray, "your new item"]})

Upvotes: 1

Related Questions