How can I added an item of an object to an object of a useState array

Viewed 65

I'm revciving a data like this:

user:
[
 {
   name: "John",
   city: "London",
   age: "21",
   language: "Enlgish"
 }
]

How can I put the value language in an object inside of a use state array? The code by far:

const [language, setLanguage] = useState([])

useEffect(() => {
axios
  .get('api').then((response) => {
              response.data.user.map((user) => {setLanguage([{...user,  added:user.language)]}))
}, [])

I know this is wrong but what I want as a result is:

language: 
  [
   {
    added: "English"
   }
  ]

How can I do it?

2 Answers

You can use forEach instead of map and slightly change the code

useEffect(() => {
axios
  .get('api').then((response) => {
    response.data.user.forEach((u) => setLanguage([...language, { added: u.language }]))
}, [])

You can use push for this.

const [language, setLanguage] = useState([])

useEffect(() => {
axios
  .get('api').then((response) => {
              response.data.user.map((user) => language.push({added:user.language}))})
}, [])

or If you wanna re-render something, need to set the value so ;

useEffect(() => {
const langValue = []
axios
  .get('api').then((response) => {
              response.data.user.map((user) => langValue.push({added:user.language}))})
  setLanguage(langValue)
}, [])

or you can declare state as object with "added" key. Then add the languages under added key :

const [language, setLanguage] = useState({added: []})

useEffect(() => {
axios
  .get('api').then((response) => {
              response.data.user.map((user) => language.added.push(user.language))})
}, [])

Output is:

language:{
    added: [
    0: "Enlgish"
    ]
}
Related