Disabling spacebar in a textbox - React - JavaScript

Question

Here I'm providing my code where I want to disable spacebar in textbox? I'm setting an alert message when entering spacebar in textbox, till here all is going well. But I want that after clicking 'OK' of an alert message the screen should be same like as it was before entering spacebar. I mean it(screen) should get loaded with all the data it was holding initially with asking a user to input something in textbox.

What my code is providing a screen with a cursor(next to spacebar) in textbox asking to enter the next input. I think it's taking a spacebar and most importantly screen is not getting roll back to its original state after clicking on 'OK' of alert message. Please help me to fix the issue.

CODE

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      term: "",
      names: [
        { name: "Roony", about: "He is a student" },
        { name: "Rocky", about: "He is a player" },
        { name: "Ronny", about: "He is a singer" }
      ],
      filteredData: [{}]
    };
  }

  render() {
    let terms = "";
    if (this.state.term) {
      terms = this.state.term.toLowerCase();
    }
    return (
      <div className="App">
        <label>Search Person: </label>
        <input
          type="text"
          value={this.state.name}
          id="searchEmp"
          placeholder="Enter Person's Name"
          onChange={(event) => {
            if (event.target.value.indexOf(" ") > -1) {
              alert("space not allowed.");
              this.setState({ term: "" });
              return;
            }
            this.setState({ term: event.target.value });
          }}
        />
        <br />
        <br />
        <hr />

        {this.state.names &&
          this.state.names
            .filter((x) => x.name.toLowerCase().startsWith(terms))
            .map((item) => {
              return (
                <div className="data-body">
                  <div>{item.name}</div>
                  <div>{item.about}</div>
                </div>
              );
            })}
      </div>
    );
  }
}

export default App;

The same I want to do when I change my data from 'array of objects' to an 'array' as names: ["Elon Musk","Bill Gates","Tim Cook","Richard Branson","Jeff Bezos","Warren Buffet","The Zuck","Carlos Slim","Bill Gates","Larry Page","Harold Finch","Sergey Brin","Jack Ma","Steve Ballmer","Phil Knight","Paul Allen","Woz"]. What changes are required to make and Where when using the same code as above? Thanks in advance to all helpers.

You can add a property in your state didTypeSpace that you set to true when a space is entered and back to false when the modal is closed. You would show the modal conditionally whenever this.state.didTypeSpace is true. — Linda Paiste
– Linda Paiste, Commented Feb 28, 2021 at 17:59

alisasani · Accepted Answer · 2021-02-28 16:18:51Z

2

change the value in the input element to value={this.state.term} and it'll work fine. This version erases the value of input after pressing space and load the page like the initial render. Sandbox

However, if you want to keep the input value same as before pressing the space button, just remove this.setState({ term: "" });. sandbox

edited Feb 28, 2021 at 16:18

answered Feb 28, 2021 at 16:12

alisasani

3,1311 gold badge10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alisasani Over a year ago

pls let me know if it solved your problem

Collectives™ on Stack Overflow

Disabling spacebar in a textbox - React - JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related