const Container = (props) => {
    return (
        <StyledDiv>
            <SmallScreenDiv>{props.children}</SmallScreenDiv>
        </StyledDiv>
    );
};

This is my code and error happens at {props.children}
how can I fix this eslint error?

CodePudding user response：

You can also destruct your props like this:

const Container = ({children}) => {
    return (
        <StyledDiv>
            <SmallScreenDiv>{children}</SmallScreenDiv>
        </StyledDiv>
    );
};

CodePudding user response：

There are two solution for this

1. Disable the prefer-destructuring feature on the eslint

2. destructure your props

    const Container = ({children}) => {
    return (
        <StyledDiv>
            <SmallScreenDiv>{children}</SmallScreenDiv>
        </StyledDiv>
    );
    };
   

or

   const Container = (props) => {
    const {children} = props
    return (
        <StyledDiv>
            <SmallScreenDiv>{children}</SmallScreenDiv>
        </StyledDiv>
    );
    };

I will recommend to use second option.