Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Angle bracket within curly brace of react jsx?

I was setting up a react pro sidebar:

import { HiInbox } from "react-icons/hi";
<MenuItem component={<Link to="/documentation" />} icon={<HiInbox />}> Documentation</MenuItem>

Does anyone know what the syntax of icon={<HiInbox />} means? How is it different than icon={HiInbox} which doesn’t work?

And why does flowbite react sidebar syntax not need it?

      <Sidebar.Item href="#" icon={HiChartPie}>
Tags:

2

Answers


  1. 0

    It means that the icon property of MenuItem accepts a jsx fragment.

    Login or Signup to reply.
  2. 0

    When you use a component (functional or class-based) in JSX:

    <Component />

    It is similar to running the function Component(), but in a syntax that is easier to use for hierarchal markup.

    Therefore it depends on the implementation of the component as different components will expect to take in a jsx component directly (Like with MenuItem), and others will take in the component and then build a jsx component from it themselves (As with Sidebar.Item).

    Here’s an analogous example with functions instead of components:

    function increment(x) {
    return x + 1;
}

function takes_function(f) {
    return f(10);
}

function takes_result(x) {
    return increment(x);
}

takes_function(increment);   // 11
takes_result(increment(10)); // 11

    In this example, takes_function takes in a function that outputs a number (Analagous to Sidebar.Item) while takes_result takes in the result of a function (Analagous to MenuItem).

    Basically, it just depends on the internal design of the component you are importing. So you just need to give each prop what it asks for.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search