Inside of my render function I have another function that is used as a defaultProp. This function maps over an array and returns multiple divs that are basically ways to write HTML for a CMS.
Here is what that function returns:
const renderElements = elementsArray
.map(
item => `<div class="explanation"><h1>${item.title}</h1>
<h2>${item.code}</h2>
</div>
<CopyToClipboard text=${item.code}>
<button>Copy</button>
</CopyToClipboard>
<div class="example">
${item.example}
</div>
`,
)
.join('');
return `${renderElements}`;
};
However, I have the CopyToClipboard package that is imported. I've tried surrounding the component with ${}, but I can't get the CopyToClipboard to be used within this template.
Related
I'm doing some work in NextJS and I needed to render a card so I created the api endpoint setup the query debugged incorrect client state on the page and now it appears that my state variables are correct but I am still not rendering what I would expect.
I'm trying to render a JSON object that looks like this:
[{"id":"cla02oxnl0000txe0vzncxq7o","creator":"cl9x4lmhv00021snptuymv0vr","broken_item":"","issue_desc":"","loc":"","active":true,"prio":"Low"}]
And I can see a valid JSON object in the list of tickets I want to render:
Client side in the console by logging the tickets array.
But I must have some syntax or misunderstanding of how I'm allowed to render here is my code for the page render:
if (!currentSession) {
return (<div> No Session</div>)
}
return (
<div>
{console.log(tickets)}
{tickets.map(({creator,broken_item, issue_desc, loc, prio,active}) => {
<TicketGUI creator={creator} broken_item={broken_item} issue_desc={issue_desc} loc ={loc} prio={prio}/>
})}
</div>
)
And the component that is trying to render it's own props just looks like this:
export default function TicketGUI(props){
return <p> {props} </p>
}
I had the syntax slightly off but my main issue is that I forgot to return something inside the anonymous function inside the map. This will fix the issue and render:
return (
<div>
{}
{tickets.map(
({creator,broken_item, issue_desc, loc, prio,active,creatorName}) => {
return(
<li key={listLength++}>
<TicketGUI creator={creator} broken_item={broken_item} issue_desc={issue_desc} loc ={loc} prio={prio} active={active} name={creatorName}/>
</li>
)
}
)}
</div>
)
In React, you can do the following:
export const Button = ({ icon, children, ...props }) => {
const Icon = () => (
icon ? <FontAwesomeIcon icon={["fal", "check"]} className={iconPositionClass}/> : null
);
return (
<BsButton children={children} {...props}>
{iconPosition === "left"
? <><Icon/>{children}</>
: <>{children}<Icon/></>
}
</BsButton>
);
};
I can create another component inside the first one, in this case, <Icon />, and then conditionally render it inside the first one, <Button />.
With Vue, however, it's not like that, because there is no return. There's just a template tag, and while you can create a function in the <script> tag, that function cannot return html.
I know that I can re-create the above code using v-if and v-else for the actual element that I want to be rendered, but that just means that I have to repeat the code inside the <template>. It feels too repetitive.
Is there a way to re-create the React way of doing it in Vue?
I would like to insert advertisement block (such as Google Adsense) inside of items list. I am using the react-redux & react-connect. Even if I need to refresh the feed and rerender, I would like to run the render of ad-block div only one time. Is there any way we can do this?
render(){
const { feed } = this.props;
return(
<div>
<div class="ad-block"><!-- Need To Render one time --></div>
<div class="items">
{_.map(feed.data, item => {
return <div class="item">.......</div>
})}
</div>
<div class="ad-block"><!-- Need To Render one time --></div>
);
}
How about to split it in 3 components?
export const Something = () => (
<>
<AdBlock>
<Feed>
<AdBLock>
<>
);
And connect Feed separately through Redux.
We are presenting dynamic error messages which are listed in a locale file as a const. As a part of that string, I am placing text [Alert] which I would like to replace with an imported alert component (which displays a nice alert etc).
How do I go about replacing part of a string in a const with a react component?
#KyLane , what about rendering the alert JSX inside the message Component as below ?
const renderAlert = () => (
<h1>this is an alert Component</h1>
)
const AlertMessage = ({ renderAlert }) => (
<div>
<p>This is a message<br/>
{renderAlert()}<br/>
End of the message
</p>
</div>
);
this is a link to codesandbox so you could try it.
I have a popover inside OverlayTrigger.
I define it as
const myOverlayTrigger = <ReactBootstrap.OverlayTrigger
placement='bottom' overlay={<ReactBootstrap.Tooltip>...</ReactBootstrap.Tooltip>}>
{myContent}
</ReactBootstrap.OverlayTrigger>;
Then I render it inside one of my elements like that:
<li>{myOverlayTrigger}</li>
I want to render OverlayTrigger itself inside <li> but it renders inside body, as defined in documentation. I'm trying to use container attribute to render it inside parent <li>.
First, I tried to assign ID to <li> and pass this ID as a string to container=... (which isn't a best way).
Second, I tried to create additional element <span></span> and render it inside along with {myOverlayTrigger}. Also I pass it (assigned to variable) to container attribute
const c = <span></span>;
... container={c} ...
<li>{c} {myOverlayTrigger}</li>
Both approaches consistently gives an error not a dom element or react component.
Obviously assigning <li>...</li> itself as a container doesn't work either as it being defined after myOverlayTrigger is defined.
Question: how to use it right?
ReactBootstrap.Overlay is recommended for the reason listed in the document.
The OverlayTrigger component is great for most use cases, but as a
higher level abstraction it can lack the flexibility needed to build
more nuanced or custom behaviors into your Overlay components. For
these cases it can be helpful to forgo the trigger and use the Overlay
component directly.
For your case, the code below renders the ReactBootstrap.Overlay component into a list item with React ref attribute.
getInitialState() {
return (
show: false
);
},
render() {
return (
<ul>
<li ref="dest" onClick={ () => {
this.setState( { show: !this.state.show } );
}}>my contents</li>
<ReactBootstrap.Overlay placement="bottom"
show={ this.state.show } container={ this.refs.dest }>
<ReactBootstrap.Tooltip>tooltip</ReactBootstrap.Tooltip>
</ReactBootstrap.Overlay>
</ul>
);
}
When the tooltip is displayed by clicking, the resulting HTML would be
<ul data-reactid=".0.1.0.0.0.0.0.1.1.1.1:$3.1.1">
<li data-reactid=".0.1.0.0.0.0.0.1.1.1.1:$3.1.1.0">
contents
<div>
<div role="tooltip" class="fade in tooltip right" data-reactid=".3">
<div class="tooltip-arrow" data-reactid=".3.0"></div>
<div class="tooltip-inner" data-reactid=".3.1">My tooltip</div>
</div>
</div>
</li>
<span data-reactid=".0.1.0.0.0.0.0.1.1.1.1:$3.1.1.1">,</span>
<noscript data-reactid=".0.1.0.0.0.0.0.1.1.1.1:$3.1.1.2"></noscript>
</ul>