I'm trying to add a tag user inputs to an existing list of tags but I keep getting TypeError. Here is a simple version of the code. I created the addTag in the App.js file and called it in the Profil.js

In the App.js

import tag from './tag.json'

const [tagList, setTagList] = useState(tag);
const addTag = (tagInput) => {
      console.log("adding..")
      const newTag = { id : Date.now(), tag: tagInput}
      setTagList([...tagList,newTag])
      console.log("added..")
    }

return (
          <Profile key={e.id} name={e.name} username={e.username} email={e.email} website={e.website} company={e.company.name}
          street={e.address.street} suite={e.address.suite} city={e.address.city} zipcode={e.address.zipcode} 
          addTag={addTag} /> )

In Profile.js

const Profile = (user,{addTag}) => {
const [tagInput, setTagInput] = useState('')
const handleChange = (e) => {
        setTagInput(e.currentTarget.value)
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        addTag(tagInput)
        setTagInput("")
    }
return (
<div className="search">
                    <input type="text" placeholder="Add a tag" value={tagInput} onClick={()=>{
                        setCancelTag(!cancelTag)
                        console.log("search enabled")
                    }} onChange={handleChange} />
                    {cancelTag? null : <button className="cancel-tag" onClick={handleSubmit} >&times;</button>}
                </div>
}

CodePudding user response：

Try the following. This would destructure addTag prop then assign/spread the rest of the properties to variable of name user:

const Profile = ({ addTag, ...user }) => {

Keep in mind, all props are passed as the first argument to the Profile function as an object with properties matching the name of the props passed to Profile.