如何在 props 中添加 JSX？

Question

I have a component which has props value. This component is global and I don't want to change its source code. I want to add pre tag inside the value prop to have a proper indentation between title and value .

<component
   title = {<strong>Name</strong>}
   value = {<pre>  {name === undefined ? myName : myNames}</pre>}
/>

Issue: I get NaN for value prop.
How do I fix it?
Also, is there a way to add a gap/padding between title and value ? Please note that I do not wish to modify the source file of Component .

Answer 1

Whenever I face a situation like this, my first approach is to make a helper function to render the smaller parts and pass them as props while invoking that function simultaneously.

For instance, for your case:-

//helper function to render title
const renderTitle = () => {
    return <strong>Name</strong>;
 };
//helper function to render value, you can also add styles to them via inline styles or using class or id.
const renderValue = () => {
  return (
    <pre style={{ marginLeft: 15 }}>
      {name === undefined ? "myName" : "myNames"}
    </pre>
  );
};
return (
  <div style={{ display: "flex" }}>
    <CustomComponent title={renderTitle()} value={renderValue()} />
    // invoking the helper functions to render the title and value
  </div>
);

Codesandbox Link - https://codesandbox.io/s/eloquent-resonance-h4m49

Answer 2

You can pass prop Components in that following Example what I made for live view you can check here SandBox

import React, { useState } from 'react';
import { render } from 'react-dom';

const Success = () => {
  return <pre>Your state isn't undefined</pre>
}

const Undefined = () => {
  return <pre>Your state isn't undefined</pre>
}

const ReturnProp = ({propJSX}) => {
  return propJSX
} 

const App = () => {
  const [name, setName] = useState(undefined)

  return <ReturnProp propJSX={name===undefined? <Undefined />: <Success />}/>
}

render(<App />, document.querySelector('#app'));