Add props to a React component passed as a prop?

Question

How do I set props to a JSX component I passed in as a prop?

Taken from https://reactjs.org/docs/composition-vs-inheritance.html shows how they do passing in a component as prop as per https://stackoverflow.com/a/63261751/242042

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } 
    />
  );
}

However, I want to modify the prop that was passed in. In the React-Native context, I would want to add additional styles to a component that was passed in as a prop.

Since I don't think you mean something as simple as `left={}` can you clarify what you are wanting and trying to do? Perhaps an code example of your code? — Drew Reese, Apr 21 '21 at 05:25
I think this what you are looking for: https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children — theekshanawj, Apr 21 '21 at 06:32

score 4 · Accepted Answer · answered Apr 21 '21 at 08:56

Basically, you need to pass a function as props instead of JSX. Here is a sample code

//App.js
import React from "react";
import "./App.css";
import SplitPane from "./SplitPane";
import Contacts from "./Contacts";
import Chat from "./Chat";

function App() {
  const ModifiedContact = (style) => <Contacts style={style} />;
  const ModifiedChat = (style) => <Chat style={style} />;

  return (
    <div>
      <SplitPane left={ModifiedContact} right={ModifiedChat} />
    </div>
  );
}

export default App;

//Chat.js
import React from "react";

const Chat =(props)=> {
  return (
    <div className={props.style}>
      Hi Im chat
    </div>
  )
}

export default Chat;

//Contacts.js
import React from "react";

const Contacts =(props)=> {
  return (
    <div className={props.style}>
      Hi Im contacts
    </div>
  )
}

export default Contacts;

//SplitPane.js
import React from "react";

const SplitPane = (props)=> {
  const contactsStyle = "new-Class";
  const chatStyle = "chat-Style";
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left(contactsStyle)}
      </div>
      <div className="SplitPane-right" >
        {props.right(chatStyle)}
      </div>
    </div>
  );
}

export default SplitPane;

//App.css
.chat-Style {
  color: rgb(10, 10, 10);
  background-color: rgb(207, 27, 27);
  text-align: center;
}

.new-Class {
  color: #fff;
  background-color: #888;
  text-align: center;
}

I think your sample has an error; you pass a `style` prop and then assign it as a class name, when style is expected to be an object... — Michael Rovinsky, Apr 21 '21 at 10:24
It does not have any error style is a JSX prop and not the attribute, so you can rename it to whatever you fancy. — Subha, Apr 21 '21 at 10:26
It can be indeed a problem with some testing tools that validate components, since `style` is a predefined prop with known data format, so the naming does matter — Michael Rovinsky, Apr 21 '21 at 10:31
Sorry I have to disagree. Would be better if you have any official docs to support your thinking. Anyway, I tested the code and it does work well. — Subha, Apr 21 '21 at 10:33
Sounds plausible, but it means that the developer needs to know that style and other props need to be set for him. It would be nice if there was a "splat" operator for the props. — Archimedes Trajano, Apr 21 '21 at 12:01

score -1 · Answer 2 · answered Apr 21 '21 at 05:29

If you use Styled Components, you can do the following:

import styled from 'styled-components';

const StyledPropComponent = styled.div.attrs(props => ({
  prop1: ...,
  prop2: ...
  ...
}))`
  style1: ...;
  style2: ...;
`;

...
<ParentComponent left={<StyledPropComponent />}
...

Add props to a React component passed as a prop?

2 Answers2