Building Recursive method in React class Component problem

Question

I am trying to make a recursive class component to check if an input is a palindrome or not. but when I am trying to call the palindrome function inside of this function its starts invoking indefinitely. using vanilla js this method worked just fine. what I am doing wrong here? and how to change the output when the input field is empty.

import React, { Component } from "react";

import "./App.css";

export default class App extends Component {
  state = { data: "", palindrome: "" };

  inputHandeler = (e) => {
    this.setState({ data: e.target.value });
  };
  palindrome = () => {
    if (this.state.data.length === 1 || this.state.data.length === 0) {
      this.setState({ palindrome: "this is palindrome" });
    } else if (
      // input abba console.log("indefinitely ")
      this.state.data[0] === this.state.data[this.state.data.length - 1]
    ) {
      this.palindrome(this.state.data.slice(1, this.state.data.length - 1));
    } else {
      this.setState({ palindrome: "this is not palindrome" });
    }
  };

  render() {
    return (
      <div className="container">
        <h1> Palindrome Checking App</h1>
        <div className="app">
          <div className="inputfield">
            <label name=" palindrome ">
              Input text to check if it is a palindrome:
            </label>
            <input id="palindrome " type="text" onChange={this.inputHandeler} />
            <button onClick={this.palindrome}>Check</button>
          </div>
          <div className="output">{this.state.palindrome}</div>
        </div>
      </div>
    );
  }
}

this.palindrome() takes no arguments, so I'm not sure what you expect this line to accomplish: this.palindrome(this.state.data.slice(1, this.state.data.length - 1)); — smac89
– smac89, Commented Nov 8, 2022 at 23:19
palindrome() doesn't take any parameters. setState schedules an update for sometime in the future with the new state. It doesn't do anything immediately. — windowsill
– windowsill, Commented Nov 8, 2022 at 23:19

smac89 · Accepted Answer · 2022-11-08 23:28:26Z

1

You need to define your palindrome method to not rely on the current state.

palindrome = (data: string[]) => {
  if (data.length === 1 || data.length === 0) {
    this.setState({ palindrome: "this is palindrome" });
  } else if (
    // input abba console.log("indefinitely ")
    data[0] === data[data.length - 1]
  ) {
    this.palindrome(data.slice(1, data.length - 1));
  } else {
    this.setState({ palindrome: "this is not palindrome" });
  }
};

render() {
  return (
    ...
    <button onClick={() => this.palindrome(this.state.data)}>Check</button>
    ...
  );
}

answered Nov 8, 2022 at 23:28

smac89

43.7k15 gold badges150 silver badges202 bronze badges

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

Collectives™ on Stack Overflow

Building Recursive method in React class Component problem

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related