I want to change visiblty properties with a function. I want when user click on the button change visible properties on textarea. How can ı make ? enter image description here

CodePudding user response：

Make a state variable to keep track of the textarea visible state, then in the textarea tag, add style for using that state variable. Then onlick event, toggle the state variable either to false or true.

CodePudding user response：

const [show, setShow] = useState(false)

const changeVisibility = () => {
  setShow(!show)
}

return (
<>
    <div className="ui form">
        {show && (
            <div className="field">
                <textarea rows="2"></textarea>
            </div>
        )}
    </div>
    <button onClick={changeVisibility}>show</button>
</>  
);

CodePudding user response：

Here's a simple example.

1. Use useState to manage the visibility of the text area.

2. Attach a handler to the button that calls a function that updates the state.

3. Use a class called hidden. Initially the textarea won't have it but you can conditionally add it if the updated state tells you to.

const { useEffect, useState } = React;

function Example() {

  const [ visible, setVisible ] = useState(true);

  function handleClick() {
    setVisible(!visible);
  }

  return (
    <div>
      <button onClick={handleClick}>Toggle visibilty</button>
      <textarea className={!visible && 'hidden'}></textarea>
    </div>
  );
};

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

.hidden { visibility: hidden; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>