Pressing the reset button will restore the table to its original

Question

Pressing the reset button will restore the table to its original

As a new React developer with experience mainly in hooks, I have been struggling to find a good example involving hooks. Currently, I am working on implementing an antd table with search functionality. My question is, when a user types something into the search bar and receives different results, how can I allow them to cancel that search by clicking a 'Reset' button?

Check out my code here

javascript css reactjs html-table antd

Answer 1

Answer №1

To assign a custom identifier to your input in the file TitleSearch.js:

<Search
      id='YOURCUSTOMID'
      placeholder="Enter Title"
      onSearch={onSearch}
      onChange={onChange}
      style={{ width: 200 }}
    />

Next, include an event in the file EventsSection.js

ResetInput = () => {
    const input = document.getElementById('YOURCUSTOMID');
    input.value = '';
    this.handleSearch('');
  }
  ....
 <button
  onClick={this.ResetInput}
 >Reset</button>

Remember to replace YOURCUSTOMID with the desired identifier

Answer 2

To assign a custom identifier to your input in the file TitleSearch.js:

<Search
      id='YOURCUSTOMID'
      placeholder="Enter Title"
      onSearch={onSearch}
      onChange={onChange}
      style={{ width: 200 }}
    />

Next, include an event in the file EventsSection.js

ResetInput = () => {
    const input = document.getElementById('YOURCUSTOMID');
    input.value = '';
    this.handleSearch('');
  }
  ....
 <button
  onClick={this.ResetInput}
 >Reset</button>

Remember to replace YOURCUSTOMID with the desired identifier

Answer 3

Answer №2

execute this script

Developed a novel function to reset the value and activate it using the reset button.

function:

resetValue = () =>{
        this.setState({
          eventsData: eventsData
        });
      }

And initiate from the button

<button onClick={this.resetValue}>Reset</button>

complete code::

import React, { Component } from "react";

import styles from "./style.module.css";
import { EventsTable } from "../EventsTable";
import { StatusFilter } from "../StatusFilter";
import { TitleSearch } from "../TitleSearch";

const eventsData = [
  {
    key: 1,
    title: "Bulletproof EP1",
    fileType: "Atmos",
    process: "match media",
    performedBy: "Denise Etridge",
    operationNote: "-",
    updatedAt: "26/09/2018 17:21",
    status: "complete"
  },
  {
    key: 2,
    title: "Dexter EP2",
    fileType: "Video",
    process: "Compliance",
    performedBy: "Dane Gill",
    operationNote: "passed",
    updatedAt: "21/09/2018 12:21",
    status: "inProgress"
  }
];

class EventsSection extends Component {
  constructor(props) {
    super(props);
    this.state = {
      eventsData
    };
  }

  handleFilter = (key) => {
    const selected = parseInt(key);
    if (selected === 3) {
      return this.setState({
        eventsData
      });
    }

    const statusMap = {
      1: "complete",
      2: "inProgress"
    };

    const selectedStatus = statusMap[selected];

    const filteredEvents = eventsData.filter(
      ({ status }) => status === selectedStatus
    );
    this.setState({
      eventsData: filteredEvents
    });
  };

  handleSearch = (searchText) => {
    const filteredEvents = eventsData.filter(({ title }) => {
      title = title.toLowerCase();
      return title.includes(searchText);
    });

    this.setState({
      eventsData: filteredEvents
    });
  };

  handleChange = (e) => {
    const searchText = e.target.value;
    const filteredEvents = eventsData.filter(({ title }) => {
      title = title.toLowerCase();
      return title.includes(searchText);
    });

    this.setState({
      eventsData: filteredEvents
    });
  };

  resetValue = () =>{
    this.setState({
      eventsData: eventsData
    });
  }

  render() {
    return (
      <section className={styles.container}>
        <header className={styles.header}>
          <h1 className={styles.title}>Events</h1>
          <button onClick={this.resetValue}>Reset</button>
          <TitleSearch
            onSearch={this.handleSearch}
            onChange={this.handleChange}
            className={styles.action}
          />
        </header>
        <EventsTable eventsData={this.state.eventsData} />
      </section>
    );
  }
}

export { EventsSection };

Answer 4

execute this script

Developed a novel function to reset the value and activate it using the reset button.

function:

resetValue = () =>{
        this.setState({
          eventsData: eventsData
        });
      }

And initiate from the button

<button onClick={this.resetValue}>Reset</button>

complete code::

import React, { Component } from "react";

import styles from "./style.module.css";
import { EventsTable } from "../EventsTable";
import { StatusFilter } from "../StatusFilter";
import { TitleSearch } from "../TitleSearch";

const eventsData = [
  {
    key: 1,
    title: "Bulletproof EP1",
    fileType: "Atmos",
    process: "match media",
    performedBy: "Denise Etridge",
    operationNote: "-",
    updatedAt: "26/09/2018 17:21",
    status: "complete"
  },
  {
    key: 2,
    title: "Dexter EP2",
    fileType: "Video",
    process: "Compliance",
    performedBy: "Dane Gill",
    operationNote: "passed",
    updatedAt: "21/09/2018 12:21",
    status: "inProgress"
  }
];

class EventsSection extends Component {
  constructor(props) {
    super(props);
    this.state = {
      eventsData
    };
  }

  handleFilter = (key) => {
    const selected = parseInt(key);
    if (selected === 3) {
      return this.setState({
        eventsData
      });
    }

    const statusMap = {
      1: "complete",
      2: "inProgress"
    };

    const selectedStatus = statusMap[selected];

    const filteredEvents = eventsData.filter(
      ({ status }) => status === selectedStatus
    );
    this.setState({
      eventsData: filteredEvents
    });
  };

  handleSearch = (searchText) => {
    const filteredEvents = eventsData.filter(({ title }) => {
      title = title.toLowerCase();
      return title.includes(searchText);
    });

    this.setState({
      eventsData: filteredEvents
    });
  };

  handleChange = (e) => {
    const searchText = e.target.value;
    const filteredEvents = eventsData.filter(({ title }) => {
      title = title.toLowerCase();
      return title.includes(searchText);
    });

    this.setState({
      eventsData: filteredEvents
    });
  };

  resetValue = () =>{
    this.setState({
      eventsData: eventsData
    });
  }

  render() {
    return (
      <section className={styles.container}>
        <header className={styles.header}>
          <h1 className={styles.title}>Events</h1>
          <button onClick={this.resetValue}>Reset</button>
          <TitleSearch
            onSearch={this.handleSearch}
            onChange={this.handleChange}
            className={styles.action}
          />
        </header>
        <EventsTable eventsData={this.state.eventsData} />
      </section>
    );
  }
}

export { EventsSection };

Answer 5

Answer №3

My solution involved adding an onClick event to the button:

Here is the code snippet I used:

<button onClick={this.resetSearch}>Reset</button>

After clicking the button, I called the resetSearch function which set handleSearch to an empty string, effectively resetting the table:

  resetSearch = () =>{
  this.handleSearch('')
}

Answer 6

My solution involved adding an onClick event to the button:

Here is the code snippet I used:

<button onClick={this.resetSearch}>Reset</button>

After clicking the button, I called the resetSearch function which set handleSearch to an empty string, effectively resetting the table:

  resetSearch = () =>{
  this.handleSearch('')
}

Pressing the reset button will restore the table to its original

Answer №1

Answer №2

Answer №3

Similar questions

Instead of using onload, activate function upon click instead

Creating dynamic pages using user input in Node and Express

performing functions concurrently within angularjs

How to Override Certificate Expiry in JavaScript

Learn how to manipulate data within a MongoDB database schema using Node.js and Mongoose: inserting, saving, and updating records

The importance of handling undefined values in TypeScript and React

"Addclass() function successfully executing in the console, yet encountering issues within the script execution

What is the process for incorporating a CSS class into a preexisting Woocommerce/Wordpress widget?

Issues encountered while using React Drag and Drop functionality from Reactdnd

How do I utilize the file handler to execute the flush method within the Deno log module using Typescript?

The AutoComplete component in React Material UI does not automatically assign the initialValue

Having trouble retrieving the data from the angular app factory

Refreshable div element in a Code Igniter-powered web application

Unexpected problem with redrawing HTML application in Android WebView

Storing user input from a dynamic form into a database using Kendo UI

Emulate an AngularJS ng-click action

VueJS Vuetify automatically centers default content

The module "angular2-multiselect-dropdown" is experiencing a metadata version mismatch error

Utilize Redux Form with Material-UI components to create a unique DatePicker form with enabled text input functionality

Utilizing Angular 2 for Integration of Google Calendar API