how to hide a button depending on the selected file-CodePudding

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>
  )
}

CodePudding user response：

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
}

CodePudding user response：

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/> }