How do I remove the component border shown onClick in react?

Question

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

Answer 1

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