Type 'boolean' is not assignable to type 'IntrinsicAttributes & boolean'

user_14484826 0
Viewed 418

I have encountered an issue with my React app, I'm trying to create private routes. However, when the I try to pass the status of the user (Authenticated or not //true or false), I get the following error :

Type '{ IsAuthenticated: boolean; }' is not assignable to type 'IntrinsicAttributes & boolean'.ts(2322)

Here's my code :

export default function App ():ReactElement {
  const params = useParams()
  const [IsAuthenticated, setAuthenticated] = useState(Boolean)
  axios.get(`${process.env.API_URL || 'http:///localhost'}:${process.env.API_PORT || 8000}/api/session`)
    .then(res => {
      console.log(res.data.IsAuthenticated)
      if (res.data.IsAuthenticated) return setAuthenticated(false)
      else return setAuthenticated(false)
    })
  return (
      <Router>
          <Routes>
            <Route path='/' element={<Home/>}/>
            <Route path='/' element={<ProtectedRoute IsAuthenticated={IsAuthenticated}/>}>
            <Route path="dashboard" element={<Main/>}/>
            <Route path='user/:userId' element={<Userdetail userId={params}/>}/>
            </Route>
            <Route
            path="*"
            element={<Navigate to="/" replace />}
            />
          </Routes>
      </Router>
  )
}```
typescript reactjs frontend
1 Answers

I ran into this error message and it was due to me typing the component props incorrectly. Here's a simplified version of what I had:

// ParentComponent.tsx

const [selected, setSelected] = useState<readonly string[]>([]);

return <ChildComponent selected={selected} />;

// ChildComponent.tsx (❌ incorrect)

                     // ▼ this is all props, so needs destructuring
const ChildComponent = (selected: boolean): ReactElement => (
  // my component
);

export default ChildComponent;

My mistake was in not destructuring the props passed from React, this fixed it:

// ChildComponent.tsx (✅ correct)

                     // ▼ destructured props correctly
const ChildComponent = ({selected}: {selected: boolean}): ReactElement => (
  // my component
);

export default ChildComponent;
user_8271290
Related