Change the state of arrows in a dropdown list-CodePudding

The code below illustrates a normal drop down list. To indicate a drop down list, I use a down arrow with arrow_drop_down This arrow remains static for me in any state of the list (open or closed). However, I would like that when clicking on the list, the arrow changes to arrow_drop_up .

Those. so that with two different states of the list, there would be two different arrows.

    export default function FilterStatusCode() {
  const [values, setValues] = React.useState([]);

  const [isExpanded, setIsExpanded] = useState(false);

  const toggleExpand = () => {
      setIsExpanded(!isExpanded);
  };

  return <>
    <div className="item-toggle-statuscode" onClick={toggleExpand}>
        <h6>Status Code</h6>
          <span >
            arrow_drop_down
          </span>
    </div>
    { isExpanded &&
      <div>
        <TagInput
          inputProps={{ placeholder: 'Add status code...' }}
          values={values}
          onChange={(values) => {
          setValues(values)}}>
        </TagInput>
      </div>
    }
</>;
}

CodePudding user response：

try

 <div className="item-toggle-statuscode" onClick={toggleExpand}>
    <h6>Status Code</h6>
      <span >
       { isExpanded ? arrow_drop_up : arrow_drop_down }
      </span>
</div>

CodePudding user response：

You can choose which arrow you use depending on the current state:

// If the list is open show the `up` arrow
// otherwise show the `down` arrow
<span className={open ? "up" : "down"}></span>

I had to improvise in this example and used unicode in the class names.

const { useState } = React;

function Example() {
  return (
    <div>
      <Item />
      <Item />
    </div>
  );
}

function Item() {

  const [ input, setInput ] = useState('');
  const [ open, setOpen ] = useState(false);

  function handleChange(e) {
    setInput(e.target.value);
  }

  function handleOpen() {
    setOpen(!open);
  }

  function handleClick() {
    console.log(input);
  }

  return (
    <div className="item">
      <div onClick={handleOpen} className="heading"> 
        <span>Status code</span>
        <span className={open ? "up" : "down"}></span>
      </div>
      {open && (
        <div>
          <input
            type="text"
            onChange={handleChange}
            value={input}
          />
          <button
            type="button"
            onClick={handleClick}
          >Submit
          </button>
        </div>
      )}
    </div>
  );

}

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

.down:after { content: '\25BC'; }
.up:after { content: '\25B2'; }
.heading:hover { cursor: pointer; color: red; }
.item { margin-bottom: 1em; }

<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>

Additional documentation

Conditional (ternary) operator