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

Creating dynamic selection options in an HTML select tag using PHP

"Spin an image using Javascript when it is shown on the

Is there a way to use node.js to retrieve a video in mp4 format?

Utilize CSS to style Hover effects

Struggling to keep the page refreshed and stay on the same page in React, however, the state refuses to update as anticipated

Learn how to send dynamic data to another HTML element using Ajax's success function

Displaying a two-dimensional array from a JSON file using AngularJS ng-repeat

Encountering issues when implementing react-router with the client-side library

The interplay between javascript and PL/SQL tasks in a dynamic scenario

Querying an array using the Contentful API

Utilizing Javascript within a PHP while loop to showcase map markers

Managing jquery values with cookies for loading, saving, and resetting

Only import Bootstrap into a single component

Merge various observables into a unified RxJS stream

The user ID variable has not been declared

Increase the line spacing within paragraphs by eliminating the extra space at the top and bottom

The dropdown functionality in Bootstrap appears to be malfunctioning

unable to properly display application.html.erb

I am having trouble inserting a table from a JSON object into an HTML file

Guide to Implementing StoreApi in Zustand LibraryLearn how to utilize Store