Question: This update query isn't working when clicking the button. Here Group is the radio button but the program is throwing an excption

```
private void editAll_Click(object sender, EventArgs e)
{
    string connectionString = @"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=C:\Users\DELL\source\repos\phoneBookwin\phoneBookwin\Database1.mdf;Integrated Security=True";

    string value;
    bool friendCheck = newFriends.Checked;
    bool familyCheck = newFamily.Checked;
    bool emergencyCheck = newEmergency.Checked;
    bool collCheck = newColl.Checked;
    if (friendCheck)
        value = newFriends.Text;
    else if (familyCheck)
        value = newFamily.Text;
    else if (emergencyCheck)
        value = newEmergency.Text;
    else if (collCheck)
        value = newColl.Text;
    else
        value = "";
    using (SqlConnection con = new SqlConnection(connectionString))
    using (SqlCommand Command = con.CreateCommand())
    {
        con.Open();
        Command.CommandText = " update Contacts set Name =@newName, Contacts = @newNumber, Email = @newEmail, Group = @newGroup where Name = @changeName"; 
        Command.Parameters.AddWithValue("@newName",newName.Text);
        Command.Parameters.AddWithValue("@newNumber", newNumber.Text);
        Command.Parameters.AddWithValue("@newEmail", newEmail.Text);
        Command.Parameters.AddWithValue("@newGroup", value);
        Command.Parameters.AddWithValue("@changeName", changeName.Text);
        Command.ExecuteNonQuery();
        con.Close();
    }
    this.Hide();

    Form1 save = new Form1();
    save.ShowDialog();
}

```

Exception thrown

> 
> 'Incorrect syntax near the keyword 'Group'.'
> 
> 
>

Answer: 
Issue
=====

You've a single boolean `showDescription` state that is toggling every description.

Solution
========

Store an index of the description you want to toggle. Use the index to match the currently mapped element. Conditionally render the description

```
export default function App() {
  const [showId, setShowId] = useState(null);

  // curried function to toggle to new index or back to null to hide
  const toggleDescription = id => () => setShowId(showId => showId === id ? null : id);

  const [anArray] = useState([
    { title: "First Div", description: "First description"},
    { title: "Antoher Div", description: "Another description"}
  ]);

  return (
    <div className="App">
      {anArray.map((val, index) => {
        return (
          <div className="div" key={index}>
            <div className="title">{val.title}</div>
            <button className="btn" onClick={toggleDescription(index)}> // <-- pass index
              Show description
            </button>
            {showId === index && ( // <-- check for index match
              <div> 
                <div className="description">{val.description}</div>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

```
You can use `index` to **show/hide** your `div`. The issue is you are using only one Boolean value to handle it.

```
export default function App() {
  const [showDescriptionIndex, setshowDescriptionIndex] = useState(-1);
  const [anArray] = useState([
    { title: "First Div", description: "First description"},
    { title: "Antoher Div", description: "Another description"}
  ]);
  return (
    <div className="App">
      {anArray.map((val, index) => {
        return (
          <div className="div" key={index}>
            <div className="title">{val.title}</div>
            <button className="btn" onClick={() => setshowDescriptionIndex(index)}>
              Show description
            </button>
            <div id={showDescriptionIndex === index ? "display" : "hidden"}>
              <div className="description">{val.description}</div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

```