CODEWITHSUNDEEP
reactjs
Thomas Segato
Thomas Segato

Reputation: 5223

Event with function components

I have just started learning REACT and has taken some courses online. I have created a very simple function component, and I want to implement an event, that the parent components can consume. I can find a lot of samples and articles on the net on how to do this using bind (int the constructor) with class components. However I have not found any articles on function components. Anyone has a simple sample or article on how to do this? In general I see many recommendations on using function components over class components, but much more articles and frameworks where people are using class components. Are function components fairly new?

import React, { useState } from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Button
} from "reactstrap";

const DropdownPaging = props => {
  const [selectedValue, setSelectedValue] = useState(10);
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const toggle = () => setDropdownOpen(prevState => !prevState);

  function dropDownChanged(val) {
    setSelectedValue(val);
  }

  return (
    <div>
      <table>
        <tr>
          <td>
            <Button outline color="dark">
              &lt;
            </Button>
          </td>
          <td>
            <Button outline color="dark">
              &gt;
            </Button>
          </td>
          <td>
            <Dropdown isOpen={dropdownOpen} toggle={toggle}>
              <DropdownToggle caret outline color="dark">
                {selectedValue}
              </DropdownToggle>
              <DropdownMenu>
                <DropdownItem onClick={() => dropDownChanged(10)}>
                  10
                </DropdownItem>
                <DropdownItem onClick={() => dropDownChanged(25)}>
                  25
                </DropdownItem>
                <DropdownItem onClick={() => dropDownChanged(50)}>
                  50
                </DropdownItem>
                <DropdownItem onClick={() => dropDownChanged(100)}>
                  100
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </td>
        </tr>
      </table>
    </div>
  );
};

export default DropdownPaging;

Upvotes: 0

Views: 84

Answers (1)

Beginner
Beginner

Reputation: 9095

No, functional components are there from a long back, One of the feature that functional components got new is handling the state and life cycle method

So before the version of 16.8, functional components were purely used to render the presentational part, so it can't handle state or handle life cycle methods

So when dealing with big applications the problem was if you need to have a single state variable you need to change the functional components to class components

So then after the release of 16.8 react team introduced hooks, so now you can handle state and life cycle methods with the help of hooks

How it came to hooks is basically

  1. Render Props - Sharing Code between components - here
  2. Hoc Components - Reusing component logic - here

You can read more on here about hooks.

Example of using hooks

  1. Async data loading - here
  2. Using state - here
  3. Rendering table data and disabling the row based on state key - here
  4. Custom Hook - window resize - here

If you are updating and trying above codesandbox fork it and update. (It will be helpful for others :) )

Upvotes: 1

Related Questions