问从当前组件成功进行api调用后，向另一个react组件显示警报

EN

export default class Tenant extends React.Component {
    constructor(){
        super();
        this.state = {
            tenantList:[],
        }
    }

    componentDidMount(){
        
        axios.get("http://127.0.0.1:8000/api/tenants").then(response => {
            this.setState({
              tenantList: [...response.data.tenants]
            })

          })
      
    }

    render() {
        const {tenantList} = this.state

        // show alert on conditon
        var alert = ''
        if(this.props.location.state!==undefined){
            alert = <div class="alert alert-success" role="alert">
                        Success       
                    </div>
            const {location,history} = this.props;
            history.replace()
        }
        
      return (
        <div>
          {/** show alert here*/}
        </div>
          
      );
    }
}

export default class AddTenant extends React.Component {
    constructor(props) {
        super(props);
        this.state ={
            startDate: moment(),
            nameInput: '',
            nidInput:'',
            nid_img:'',
            phoneInput:'',
            rentInput:'',
            hridInput:'',
            nameError: '',
            nidError:'',
            phoneError:'',
            rentError:'',
            hridError:'',
            errors:'',
            msg:'',
            redirect:false
        }
    }

    handleDateChange = (date)=>{
        this.setState({
            startDate: date
          })
        
    }
    handleFieldChange = (e)=>{ 
        this.setState({
            [e.target.name] : e.target.value
        })
        
    }
    handleDropDownMenu = (hridInput)=>{
        this.setState({ hridInput });
        console.log(`Option selected:`, hridInput);
    }

    validate = ()=>{
        let flag = true;
        let nameError = ""
        let hridError = ""

        if(!this.state.nameInput.includes(' ')){
            nameError = "Full name should contain a space"
            this.setState({nameError})
            flag = false
        }
        
        if(this.state.hridInput.value === undefined){
            hridError = "please select a house/room number"
            this.setState({hridError})
            flag = false
        }

        //datepicker validation is not done

        return flag

    }
    

    handleFormSubmit = (e)=>{
        e.preventDefault();
        
        let isValid = this.validate()

        if(isValid){
            console.log("form valid")
            const tenant = {
                name: this.state.nameInput,
                nid:this.state.nidInput,
                phone:this.state.phoneInput,
                exp_rent: this.state.rentInput,
                reg_date:moment(this.state.startDate).format("YYYY-MM-DD"),
                hrid:this.state.hridInput.value
            }
            //below line is commented because to test redirect component
            //console.log(tenant)
            // axios.post('http://127.0.0.1:8000/api/tenants', tenant)
            // .then(response => {
            //     // redirect to the homepage
            //     this.setState({redirect:true,msg:'success'})
            //     console.log(response);
                
            // })
            // .catch(error => {
            //     this.setState({
            //     errors: error.response.data.errors,msg:'failed'
            //     })
            // })
            this.setState({redirect:true,msg:'success'})
            this.setState({nameError:'',hridError:''})
        }
    }

    render() {
        if(this.state.redirect){
            return <Redirect to={{
                pathname: "/tenant",
                state : {msg:this.state.msg}
            }}/>
        }
      return (
        <div>
            <AddTenantForm />
        </div>
      );
    }
}