Using a state variable to hide menu options after clicking a submit button

Question

const [selected, setSelected] = useState([]);
const [hide, sethide] = useState();

<Accordion.Body>
                    {[
                      "one",
                      "two",
                      "three",
                      "four",
                      "five",
                      "six",
                      "seven",
                      "eight",
                    ].map((device) => (
                     this.hide && <Form.Check
                        label={device}
                        name={device}
                        type="radio"
                        id={device}
                        onChange={(x) => insert_Checked(x.target.id)}
                      />
                    ))}
                  </Accordion.Body>


  const insert_Checked = (val) => {
    console.log(`value being passed to function : ${val}`);
    setSelected((oldArray) => [...oldArray, `${val}`]);
    console.log(selected);
  };

I have this Container ( Accordion.Body from React-bootstrap) that has a bunch of radios. The application will push the "id" of any radio that is checked into a useState array "selected". I want to click a button that makes the selected radios disappear. my attempt at a solution was to create another use state hook hide and that's where I am stuck. Is it possible for a state hook to have an "instance" ? What other options do I have to make this work ? Any help would be appreciated.

score 2 · Answer 1 · answered Jul 26 '22 at 08:19

You need to add a check if device is selected. Maybe you can add button to update hidden devices to selected devices then hide them accordingly.

To set hidden fields:

 const  [hidden, setHidden] = useState([]);

<button onClick={() => setHidden(selected)}>hide</button>

To hide:

!hidden.includes(device) && <Form.Check ...

Using a state variable to hide menu options after clicking a submit button

1 Answers1