how to make tooltip for TextField material ui react hooks

user_16057246 0
Viewed 3367

I have TextField I want the tooltip show when the length of that TextField less then 5

import React from 'react';
import Button from '@material-ui/core/Button';
import Tooltip from '@material-ui/core/Tooltip';

export default function ArrowTooltips() {
  const [currentApp, setCurrentApp] = useState({})
  const handleChange = (event, name) => {
    setCurrentApp({ ...currentApp, [name]: event.target.value })
  }
  return (
    <Tooltip title="Add" arrow open={currentApp.Name.lenght < 5 ? true : false}>
      <TextField value = {currentApp.Name} onChange={(e) => handleOnChange(e, "name")}/>
    </Tooltip>
  );
}

how to make something like this

<Tooltip title="Add" arrow open={currentApp.Name.lenght < 5 ? true : false}>
material-ui react-hooks reactjs
1 Answers

There are some mistakes in your code:-

  1. There is typo in length
  2. At first render, currentApp will be blank object so when we access name from blank object it will return undefined so when trying to find length of undefined it will throw error. To solve this we should use optional chaining
  3. on input change you should call handleChange function.

Try something like below:-

import React from 'react';
import Button from '@material-ui/core/Button';
import Tooltip from '@material-ui/core/Tooltip';

export default function ArrowTooltips() {
  const [currentApp, setCurrentApp] = useState({})

  const handleChange = (event, name) => {
    setCurrentApp({ ...currentApp, [name]: event.target.value })
  }
  return (
    <Tooltip title="Add" arrow open={currentApp?.name?.length < 5 ? true : false}>
      <TextField value={currentApp.name} onChange={(e) => handleChange(e, "name")}/>
    </Tooltip>
  );
}
user_86655890
Related