Reactjs - onClick works after first click

Question

I am new to react so I apologize in advance if there is an obvious solution to this. But I am attempting to create a reusable search component, in this search component I have an input field that I would like to change the border when clicked upon.

Currently, this css onClick function is only working after the second click. I am not getting any errors in my console so I am currently lost on what the solution is. I've attempted to do some research and I've had no luck.

Here is my code :

    const searchBorderChange= () => {
        var textareas = document.getElementsByTagName('input');
    
        for (let i=0; i<textareas.length; i++){
            // you can omit the 'if' if you want to style the parent node regardless of its
            // element type
            if (textareas[i].parentNode.tagName.toString().toLowerCase() == 'div') {
                textareas[i].onfocus = function(){
                    this.parentNode.style.borderColor  = '#FF0000';
                }
                textareas[i].onblur = function(){
                    this.parentNode.style.borderColor = '#B9C0D0';
                }
            }
        }
    }

const SearchBar= () => (

    <div className="search-nav">
        <h1 className="padding-bottom">Search
            <br /> Here <span className="text-bold">Lookup Keywords</span></h1>
        <div>
            <div className="content">
                <div className="search-bar">
                    <i className="fas search fa-search"></i>
                    <input type="text" name="search" placeholder="Search by Keyword" onClick={searchBorderChange} />
                </div>
            </div>
        </div>
    </div>
);

export default SearchBar;

I am expecting the border of my search div to change on the first onClick function.

Tholle · Accepted Answer · 2020-12-23 00:57:23Z

3

It's generally a good idea not to alter the document manually in React if you can avoid it. You could keep the input border color in a state variable and change it when it is focused or blurred.

Example

const { useState } = React;

const defaultColor = "#B9C0D0";

const SearchBar = () => {
  const [inputColor, setInputColor] = useState(defaultColor);
  
  return (
    <div className="search-nav">
      <h1 className="padding-bottom">
        Search
        <br /> Here <span className="text-bold">Lookup Keywords</span>
      </h1>
      <div>
        <div className="content">
          <div className="search-bar">
            <i className="fas search fa-search"></i>
            <input
              type="text"
              name="search"
              placeholder="Search by Keyword"
              style={{ border: `1px solid ${inputColor}` }}
              onFocus={() => setInputColor("#FF0000")}
              onBlur={() => setInputColor(defaultColor)}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

ReactDOM.render(<SearchBar/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

answered Dec 23, 2020 at 0:57

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

IvanD Over a year ago

Thank you. I was wondering how to create React snippets on SO, now I have a working example :)

Tholle Over a year ago

@maimok Yes, useState is the hook used to create a state variable in the component.

Collectives™ on Stack Overflow

Reactjs - onClick works after first click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related