I'm making a blog where I need a button to appear only if a user selects a specific story, if the user selects other reports, the button should not appear.
These reports are in markdown file.
I thought of using a conditional rendering with a state and use
{
Show && (<div><div/>)
}
Here's the code where the commented part what was trying to do something
import markdownStyles from './markdown-styles.module.css'
import Show_button_1 from './show_button_1'
export default function PostBody({ content }) {
/*const retornarPagina=()=>{
if(content==_posts.receita_0.md){
return
<Show_button_1/>
}
*/
return (
<div className="max-w-2xl mx-auto">
<div
className={markdownStyles['markdown']}
dangerouslySetInnerHTML={{ __html: content }}
/>
<Show_button_1/>
</div>
)
}
I tried to do it this way but it didn't work (03/30/2022)
import React, {useState} from 'react'
import markdownStyles from './markdown-styles.module.css'
import Show_button_1 from './show_button_1'
export default function PostBody({ content }) {
const [Show, setShow] = useState(false);
const retornarPagina=()=>{
if(content===_posts.receita_0.md){
{setShow(true)}
}
}
return (
<div className="max-w-2xl mx-auto">
<div
className={markdownStyles['markdown']}
dangerouslySetInnerHTML={{ __html: content }}
/>
{Show && (<Show_button_1/>)}
</div>
)
}
I'm not sure I understood the question correctly, but one crutch I used to conditionally render components was
{
Show ? (<div><div/>) : (<></>) //doesn't render anything
}
This should work for you.
{content === '_posts.receita_0.md' && <Show_button_1/> }
If you need multiple lines:
{content === '_posts.receita_0.md' && (
<Show_button_1/>
)}
you won't be able to use conditional rendering on a full file, you may want to consider refactoring your code to send a title of the markdown file through props as well. so you would do something like so:
<MyComponent content={document.markdown} title={document.title}/>
Then you can easily do
{props.title === 'some_title' && <Show_button_1/> }