Add additional props to JSX Element variable

Question

How can I add additional props to a JSX.Element variable that is passed as a prop?

First I create the variable like so

const leftIcon = <SmallIcon icon="note" color={colors.red} />

Then it is passed to my function component and used like

const ScreenHeader: React.FunctionComponent<ScreenHeaderProps> = ({
  leftIcon = <></>,
}) => {

return (
    <View>
    <Header 
      leftComponent={leftIcon}
    />
  </View>
)};

How can I add an additional styles prop to the "leftIcon" variable before it is used in Header?

Are you still having issues?

goto
– goto

2020-04-20 15:18:13 +00:00
Commented Apr 20, 2020 at 15:18 — goto
– goto, Commented Apr 20, 2020 at 15:18

goto · Accepted Answer · 2020-04-20 16:50:48Z

If you initialize a variable with a React component the way you're doing it right now (const leftIcon = <SmallIcon />), then you won't be able to pass additional props into it.

Here's a possible solution:

// make `LeftIcon` into a function so that you
// can use it in the following way: `<LeftIcon />`
const LeftIcon = (props) => (
  <div className="LeftIcon" onClick={() => {}} {...props}>
    <p>I am a left icon!</p>
    <p>Additional props: {JSON.stringify(props)}</p>
  </div>
);

const ScreenHeader = ({ leftComponent = null }) => {
  const CustomLeftComponent = leftComponent ? leftComponent : null;
  const greenComponent = CustomLeftComponent 
    ? <CustomLeftComponent style={{ color: "green" }} /> 
    : null;
  return (
    <div>
      <p>I am a screen header!</p>
      {greenComponent}
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <ScreenHeader leftComponent={LeftIcon} />
      <hr />
      <ScreenHeader />
    </div>  
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("app")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Alternatively, you could pass additional props to the LeftIcon component prior to using it inside ScreenHeader:

// make `LeftIcon` into a function so that you
// can use it in the following way: `<LeftIcon />`
const LeftIcon = (props) => (
  <div className="LeftIcon" onClick={() => {}} {...props}>
    <p>I am a left icon!</p>
    <p>Additional props: {JSON.stringify(props)}</p>
  </div>
);

const ScreenHeader = ({ leftComponent = null }) => {
  return (
    <div>
      <p>I am a screen header!</p>
      {leftComponent}
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <ScreenHeader leftComponent={<LeftIcon style={{ color: "green" }} />} />
      <hr />
      <ScreenHeader />
    </div>  
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("app")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

TheToto · Accepted Answer · 2021-05-27 12:54:55Z

0

You can use React.cloneElement to add additional props

const ScreenHeader: React.FunctionComponent<ScreenHeaderProps> = ({
  leftIcon = <></>,
}) => {

return (
    <View>
    <Header 
      leftComponent={React.cloneElement(leftIcon, {className: classes.myClass})}
    />
  </View>
)};

answered May 27, 2021 at 12:54

TheToto

1311 silver badge5 bronze badges

Collectives™ on Stack Overflow

Add additional props to JSX Element variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related