为什么我的 updatedText 组件没有被渲染？

Question

I'm trying to complete a challenge and those are the final steps:

5 -> Render a list of CharComponents where each CharComponent receives a different letter of the entered text (in the initial input field) as a prop.

6 -> When you click a CharComponent, it should be removed from the entered text.

Step 5 goes fine but I can't realize why the updated textList isn't rendered.

App.js:

import React, { Component } from "react";
import "./App.css";

import Validation from "./ValidationComponent";
import Char from "./CharComponent";

class App extends Component {
state = {
    text: "",
    length: 0,
};

textHandler = (e) => {
    const text = e.target.value;
    const length = text.length;
    this.setState({ text: text, length: length });
};

deleteCharHandler = (index) => {
    const text = this.state.text.split("");
    text.slice(index, 1);
    const updatedText = text.join("");
    this.setState({ text: updatedText });
};
render() {
    const textList = this.state.text.split("").map((char, index) => {
    return (
        <Char
        letter={char}
        key={index}
        click={() => this.deleteCharHandler(index)}
        />
    );
    });

    return (
    <div className="App">
        <input type="text" onChange={this.textHandler} />
        <p>{this.state.length}</p>
        <Validation length={this.state.length} />
        {textList}
    </div>
    );
}
}

export default App;

CharComponent:

import React from "react";

import "./styles.css";

const charComponent = (props) => {
return (
    <div className="Char">
    <p onClick={props.click}>{props.letter}</p>
    </div>
);
};

export default charComponent;

ValidationComponent:

import React from "react";

import "./styles.css";

const validationComponent = (props) => {
let message = "";
if (props.length < 5 && props.length !== 0) message = "Text is too short!!!";
if (props.length > 18) message = "Text is long enough!!!";
return (
    <div>
    <p>{message}</p>
    </div>
);
};

export default validationComponent;

Answer 1

In deleteCharHandler , you are using slice instead of splice .