React Input type not able to insert any data

Question

In my React component I have used input type; but somehow it is not going to to editable anyhow.

I have checked this post as well but not able to trace the solution.

const Index = ({
  const [editable, setEditable] = useState(false)
  const [email, setEmail] = useState('')

  useEffect(() => {
    if (data) {
      setEmail(data.primaryEmail)
    }
  }, [data])

  return (
    <Emails 
      data={data} 
      changeHandle={e => setEmail(e.target.value)}
      emailName={email}
    />
  )
})

export default connect(mapStateToProps)(Index)


const Emails = ({
    data,
    changeHandle,
    emailName
  }) => {

return (
  <Card>
    <React.Fragment>
      <tr key={email}>
        <td className="text-gray-6 pl-0 pb-0">
          <input className="mb-2" value={emailName} onChange={e => changeHandle(e)} />
        </td>
      </tr>
    </React.Fragment>
  </Card>
)
}

export default Emails

What's am I doing in this above code ?

This seems like a overcomplicated way to control an input, and your `changeHandle` doesn't appear to actually save the new value anywhere. — DBS, Dec 15 '21 at 13:40
So, where can I exactly utilise the `changeHandle` to handle the editable field ? — TMA, Dec 15 '21 at 13:51
A simple managed input would generally look something like this: ` setEmail(e.target.value)} />` I'm not sure I understand the need for you to use multiple states and setter functions. [React controlled components documentation](https://reactjs.org/docs/forms.html#controlled-components) — DBS, Dec 15 '21 at 13:55

Renato Willyan · Accepted Answer · 2021-12-15T13:58:40.873

1

You're passing the email as a prop, but in your Emails element, it just takes 'data' and 'channgeHandle'. Try to add email as a prop:

const Emails = ({ data, email, changeHandle }) => {
  return (
    <Card>
        <tr key={email}>
          <td className="text-gray-6 pl-0 pb-0">
            <input className="mb-2" value={email} onChange={e => changeHandle(e)} />
          </td>
        </tr>
    </Card>
  )
}

After that, pass the setEmail to the changeHandle prop:

return (
    <Emails 
      data={data} 
      changeHandle={e => setEmail(e.target.value)}
      emailName={email}
    />
  )

Beside this, apparently your data prop is not used at any moment, so I don't see the utility for it.

edited Dec 15 '21 at 13:58

answered Dec 15 '21 at 13:44

Renato Willyan

346
2
12

I passed the `emailName` as props but still it is not going to editable. Please review updated question. – TMA Dec 15 '21 at 13:49
In your changeHandle prop use the setEmail to change the state of the email. – Renato Willyan Dec 15 '21 at 13:53
I am managing that `setEmail` into another component. But still it is not working. – TMA Dec 15 '21 at 14:00
Your changeHandle prop is just console.log the changed value. Because of that, there's no way this works. – Renato Willyan Dec 15 '21 at 14:08
Ohh, that I used for just check the log, but nyws updated that potion as well. But still n change at all :( – TMA Dec 15 '21 at 14:13

React Input type not able to insert any data

1 Answers1