Whenever I click on any of the components I get a black border, although when I click away the border disappears. How do I prevent the web app from doing so? Below there is a picture of what I get in my app.
Also, this is a link to a sandbox where I have the same issue: https://codesandbox.io/s/es6-spread-operator-practice-drbyh?file=/src/components/App.jsx
This is caused by the &focus css selector as shown bij the inspector.
Add outline: none to the <button> to remove it;
<button style={{outline: 'none'}} onClick={onInputSubmit}>
This is because the :focus pseudo-class is adding an outline into the button. You can change that behaviour by using css like this:
button:focus {
outline: none;
}
Or by adding it as an inline style as well, even though I personally don't recommend it because having a lot of inline styles could cause to have a messy and hard to read HTML.