DEV Community: coding_tarento

Custom Select Input with React

coding_tarento — Fri, 19 Aug 2022 10:42:00 +0000

Hi aliens 👽, I am here to share most simplest pattern for select input. If you are struggling with select input 😥,confused and facing difficulties to use pure html select input , then this blog is for you my dear. In this blog we are going to discuss controlled input without using any third party library.
lets jump into the code...💻

// App.js
import "./styles.css";
import Dropdown from "./Dropdown";
import { useState } from "react";
export default function App() {
  const [selected, setSelected] = useState("Choose One");
  return (
    <div className="App">
      {/* custom dropdown menu */}
      <Dropdown selected={selected} setSelected={setSelected} />
      {selected}
    </div>
  );
}

// Dropdown.js
import { useState } from "react";
function Dropdown({ selected, setSelected }) {
  const [isActive, setIsActive] = useState(false);
  const options = ["React", "Vue", "Angular"];
  return (
    <div className="dropdown">
      <div className="dropdown-btn" onClick={(e) => setIsActive(!isActive)}>
        {selected}
        <span className="fas fa-caret-down"></span>
      </div>
      {isActive && (
        <div className="dropdown-content">
          {options.map((option) => (
            <div
              onClick={(e) => {
                setSelected(option);
                setIsActive(false);
              }}
              className="dropdown-item">
            {option}
            </div>
          ))}

        </div>
      )}

    </div>
  );
}
export default Dropdown;

Here we are lopping through options array for option tag.
This is fully controlled component

We have create the isActive state for updating the option display if it is false , options will hide , and if it is true we are rendering option , this is simple conditional rendering .
then after we are using onChange event for targeting option value
onChnage we are capturing event , and we are setting event.target.value to selected state

woah ! finish yep so simple to create your own custom controlled select input , hope you like the information , you can also check sandbox link and play around it!😺
https://codesandbox.io/s/custom-dropdown-select-oyisxm

useState ()

coding_tarento — Thu, 14 Jul 2022 14:14:00 +0000

Hi👋, if you landed up on this page there is good chance that you already know the JavaScript .I believe if you reading this blog that mean you have basic understanding of variables . if your answer is yes then congratulations ! you will understand useState very easily .

lets think about it , what is the purpose of variable?? yep yep yep you are absolutely right ! , the puspose of variable is store some value and we can change the value of variable .finally react talks ...
important note useState hook is only for functional component

useState accepts an initial state and returns two values

The current state.
A function that updates the state.

To use the useState Hook, we first need to import it into our component.

import {useState} from "react"

sample counter using useSate hook:
import {useState} from "react" import "./styles.css"; export default function App() { // count is state name and setCount is a setter function const [count,setCount]=useState(0) const addHandler =()=>{ setCount(count+1) } const substractHandler=()=>{ setCount(count-1) } return ( <div> <div className="heading-name"> Counter App </div> <div className="count"> {count} </div> <div className="button-container"> <button class="counter-button" onClick={addHandler}> + </button> <button class="counter-button" onClick={substractHandler}> - </button> </div> </div>)}
we can able to change the state value by using setter function easily . The count is the current value and setCount is setter function for manipulating count value .
summery :

react hooks are special functions
1. useState is also a special kind of function which accepts state as an argument it can be anything string, array , object , number
2. it will return current value and setter function. Hope you love the blog! you can check the sandbox link and play around it.. take carea!!! https://codesandbox.io/s/react-uesstate-hook-counter-mvki7w?file=/src/App.js:0-595