Conditional rederization of a component from a selected item

Question

good afternoon, I am going through difficulties to perform a conditional rendering that aims to render an Iconbutton only when and selected a value from the predefined list.

my const with the list

const [nomesRepresentantes, setNomesRepresentantes] = useState<
    { id: number; title: string }[]
  >([]);
  useEffect(() => {
    setNomesRepresentantes([
      { id: 1, title: "João da silva" },
      { id: 2, title: "Joãozinho da silva" },
      { id: 3, title: "Maria da silva" },
      { id: 4, title: "José da silva" },
    ]);
  }, []);

here is my autocomplete where I select the names

<Autocomplete
   id="namesAutocomplete"
   options={names.map((option) => option.title)}
   freeSolo
   value={representante.representante}
   renderInput={(params) => (
   <TextField {...params} variant="outlined" />
   )}
/>

and this is the Iconbutton I need to render only when I select a value from my Autocomplete

<IconButton>
  <OpenInNewSharpIcon
    fontSize="default"
    color="primary"
  />
</IconButton>

if necessary I can share all my component, thank you in advance for the help.

Answer 1

What’s in the documentation says at the event onChange is responsible for changing the status of a previously configured variable in its component Autocomplete. This already happens in the natural component of html by the name of select, then the example given in the documentation is the following:

const [value, setValue] = React.useState(null);
<Autocomplete
    value={value}
    onChange={(event, newValue) => {
      setValue(newValue);
    }}

at the time of that change React.useEffect to monitor changes in the status variable value so you can change some component on the screen, note:

React.useEffect(() => {
    //efeito observado quando a variavel `value` for alterada
}, [value])

or using the variable itself value by changing the write state as follows:

{value != null && (
    <IconButton>
      <OpenInNewSharpIcon
        fontSize="default"
        color="primary"
     />
    </IconButton>
)}

if the variable is different from null show the component <IconButton>.

A real example with basic components html:

function Main() {
  const [options, setOptions] = React.useState(['Sim', 'Não']);
  const [value, setValue] = React.useState(options[1]);  
  return (
    <div style={{padding: 10}}>
     <div style={{height: 30}}>
     {value === 'Sim' && (<span>Mostrando ...</span>)}
     </div>
     <div>
      <select value={value} onChange={e => setValue(e.target.value)}>
       { options.map((o,i) => (<option>{o}</option>) ) }
      </select>
     </div>     
    </div>
  )
}
ReactDOM.render( <Main />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="root">Carregando ...</div>

in this example demonstrates that depending on the value, it shows a message, and this is a clear example that you can use in your project.

On the site itself has an example read that will also help you a lot.