I receive an array like this from backend:

[
  {
    id: 0,
    name: "John",
    language: "Enlgish" 
  },
    {
    id: 1,
    name: "Chris",
    language: "Spanish" 
  },
    {
    id: 2,
    name: "Bastian",
    language: "German" 
  }
]

So I display the languages from this array in a table, and to do that I map through them. I don't want to show the first language on the first object of this array

Parent.js

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

useEffect(() => {
 axios
    .get('api').then((res) => {setLanguage(response.data.languages)})
}, [])

Child.js

return(
       {language.map((lang, i) => {
           return (
               <tr key={"item-"   i}>
                  <td>
                    <div>
                       <input
                          type="text"
                          value={
                            lang.language
                              ? lang.language.shift()
                              : lang.language
                          }
                      </div>                 
                    </td>
                </tr>
          ))}
)

So what I have tried by far is the shift method which removes the first item of an array, but it didn't work. This error happened :TypeError: lang.language.shift is not a function

How can I fix this?

CodePudding user response：

Instead of language.map(... just use language.shift().map(... . shift() method will trim the first element of the array and return a copy of it as a result. You can use that copy to map through as shown previously.

CodePudding user response：

Use the index

   {language.map((lang, i) => {
    (i > 0) && (
       return (
        ......