recently I am learning react, and want to try to be a todo. But there was a problem when the parent component passed the value to the child component

parent App:

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      set:[{title:"",content:"",isOn:true}]
    }
    this.handleSave = this.handleSave.bind(this);
  }
  handleSave(set){
    this.setState({set:[set]})
  }
  render() {
    console.log("")
    return (
      <div className="App">
        <div className="App-header">
          <p className="App-title">Fidlcn"s Todo

        </div>
        <div className="todoBox">
              <Add onSave={this.handleSave} />
              <Content states = {this.state} />
        </div>
      </div>
    );
  }
}

Sub-component content:

class Content extends Component{
    constructor(props){
        super(props);
        this.state = { set:[this.props.states.set[0]]};
        this.handleBtnStatusChange = this.handleBtnStatusChange.bind(this);
    }
    
    shouldComponentUpdate(nextProps, nextState) {
        if( nextProps.states.set.title !== "undefined"){
            this.setState({set:[nextProps.states.set[0]]})
            console.log(nextProps.states)
            return true
        }
    }
    handleBtnStatusChange(e){
        console.log(e);
        console.log(this);
    }
    render(){
        return(
            <div  className="content">
                <ul className="ulList">
                {
                    this.state.set.map((item,i)=>{
                        let isOn = item.isOn;
                        return (
                            <li key={i}>
                                <span>{i+1}</span>
                                <div className="ulDiv">
                                    <h3>{item.title}</h3>
                                    {item.content}
                                </div>
                                <div className="ulBtn">
                                    {isOn ? (
                                        <input type="button" value="Y" />):(
                                        <input type="button" value="Y" disabled />
                                    )}
                                    <input type="button"  value="N" onClick={this.handleBtnStatusChange} />
                                </div>
                            </li>
                        )
                    })
                }
                </ul>
            </div>
        )
    }
}

Sub-component add:

import React from "react";
import { Button, Input } from "antd"
import "antd/dist/antd.css";
import "./common.css";
import "../App.css";

const { TextArea } = Input;

class Add extends React.Component{
    constructor(props){
        super(props);
        this.handleUpload = this.handleUpload.bind(this);
        this.handleSaveT = this.handleSaveT.bind(this);
        this.handleSaveC = this.handleSaveC.bind(this);
        this.state = {title:"",content:"",isOn:true};
    }
    handleSaveT(e){
        this.setState({title:e.target.value})
    }
    handleSaveC(e){
        this.setState({content:e.target.value});
        this.setState({isOn:true});
    }
    handleUpload(){
        this.props.onSave(this.state)
    }
    render(){
        console.log("add")
        return(
            <div className="Add">
                <h2>Todo</h2>
                <div className="inputArea">
                    <Input addonBefore="" onChange={this.handleSaveT} />
                    <TextArea rows={18} id="titleInput" placeholder="" onChange={this.handleSaveC} />
                </div>
                <Button type="primary" onClick={this.handleUpload}></Button>
            </div>
        )
    }
}

export default Add;

the idea is to input the value in add, click Button to pass the value to the parent component, and the parent group passes the value to the state of the child component content to trigger the update. But the actual situation is that the error will be reported when you click the button in add. You can see that the problem is that the parent component changes the content value, but does not know how to modify it (the figure does not know why it cannot be uploaded)

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    
  12 | 
  13 | shouldComponentUpdate(nextProps, nextState) {
  14 |     if( nextProps.states.set.title !== "undefined"){
> 15 |         this.setState({set:[nextProps.states.set[0]]})
  16 |         console.log(nextProps.states)
  17 |         return true
  18 |     }