Feedback for “<MagicMotion />”Invalid prop style supplied to React.Fragment. React.Fragment can only have key and children props

[dlrodev92]

I can't figure out this.

[Etesam913]

Can you provide the code that you wrote which led to this error? This would be helpful for me in figuring out why this is happening.

[Rangel7y]

Me too received this warnings:
"Warning: Invalid prop style supplied to React.Fragment. React.Fragment can only have key and children props.
at MotionComponent..."

"Warning: Invalid attribute ref supplied to React.Fragment.
at MotionComponent..."

My code at the moment:

[Etesam913]

So, this error appears when there is a fragment as a child of the MagicMotion.

For example, this warning will show below:

import "./App.css";
import { MagicMotion } from "react-magic-motion";
import { useState } from "react";

export default function App() {
  const [shouldShow, setShouldShow] = useState(false);
  return (
    <main
      style={{
        padding: "0.75rem 1rem 0",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <MagicMotion>
        <>
          <div>item 1</div>
          <div>item 2</div>
        </>
      </MagicMotion>
    </main>
  );
}

The solution here is to change the fragment into a div or some other tag.

For example, this is a solution

<MagicMotion>
  <div>
    <div>item 1</div>
    <div>item 2</div>
  </div>
</MagicMotion>

I would assume that somewhere in your components that are children of a MagicMotion, you are using empty brackets <> </>

[dlrodev92]

thanks, that works for me now. Sorry for responding this late.