javascript - Why do I get this error - Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render

Question

I am trying to set this video to be rendered and it works but for some reason I get the error from the title and I am not sure why that is the case. I am trying to use this video-rendering library to set my video work properly and then I call it in the return. I hope you can help me figure it out.

This is my code:

import React from "react"
import styled from 'styled-components';
import Images from '../assets/Images';
import VideoRenderer from 'react-video-renderer';

const BoatStyle = styled.div `
    max-height: 100%;
    display: block;
    align-self: center;
    width: 1250px;
    height:auto;
    position: absolute;
    top: var(--top);
`

export default class Video extends React.Component {
    state = {
        defaultTime: 0,
    }

    componentDidUpdate(prevProps, prevState) {
        if (this.props.mode !== prevProps.mode) {
            if(!(prevProps.mode === "TRAILER" || this.props.mode === "TRAILER"))
            {
                this.props.ChangeImage(false)
            }
            
            if(this.props.mode === "FLIGHT") {this.setState({defaultTime: 0})}
            else {this.setState({defaultTime: 3.7})}
        }
    }

    render() {

        const video =  <VideoRenderer src="images/BoatAnimation.webm" autoPlay={true} defaultTime={this.state.defaultTime}>

        {(video, state, actions) => { //start arrow function
            
        if(this.props.mode === "FLIGHT"){ //start if

            if(this.props.isImage === true) {
               // console.log("FLIGHT Image")
                return (
                    <BoatStyle>
                        <img alt="FLIGHT" src={Images[90]}/>
                    </BoatStyle>
                )
            }

            else if(state.currentTime > 3.7)
            {
                setTimeout(() => {
                    this.props.ChangeImage(true)
                    actions.navigate(3.7) //curcly braces redundant
                }, 15);

                return ( 
                    <BoatStyle>
                        {actions.pause}
                        <img alt="PAUSE" src={Images[90]}/>
                    </BoatStyle>
                )
            }
            else {
                //console.log("Flight Video")
                return (
                        <BoatStyle>
                            {actions.play}
                            {video}
                        </BoatStyle>
                )    
            }
        } // end if

        else if(this.props.mode === "FLOAT" || this.props.mode === "TRAILER"){ // start else if

            if(this.props.isImage) {
               // console.log("FLOAT Image")
                return (
                    <BoatStyle>
                        <img alt="FLOAT" src={Images[0]}/>
                    </BoatStyle>
                )
            }
            else if(state.currentTime === state.duration)
            {
               // console.log("FLOAT Become Image")
                setTimeout(() => {
                    this.props.ChangeImage(true)
                    actions.navigate(0)  //curcly braces redundant
                }, 15);

                return ( 
                    <BoatStyle>
                    {actions.pause}
                    <img alt="PAUSE" src={Images[0]}/>
                    </BoatStyle>
                )
            }
            else {
                //console.log("FLOAT Video")
                return (
                    <BoatStyle>
                        {actions.play}
                        {video}
                    </BoatStyle>
                )
            }
        } //end else if
        else { //start else 
                return(
                    <BoatStyle>
                    <img alt="MISSING" src={Images[0]}/>
                </BoatStyle>)
            } //end else 
        
        }//end arrow function
     } 
    
    </VideoRenderer>

        return(
            <BoatStyle>
                {video}
            </BoatStyle>
        )
    }
}

Answer 1

等待大神答复