Reactjs - onClick works after first click

user_13924027 0
Viewed 59

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.

reactjs css javascript
1 Answers

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>

user_36178860
Related