A better way to render component ? React [closed]

I need a better way to render this component so I need advice.

Check my code:

renderComponent = () => {
  if(id){
    return <Placeholder> { id } </Placeholder>
  } else if(date) {
     return <Placeholder> This is date { date } </Placeholder>
  } else if (testData === 'test'){
    return <TestDataComponent></TestDataComponent>
  }
}

Maybe a switch would be a better a way? I am using ternary operator but here is three values... maybe I need to add one more conditional.

I want to say this is work , but just need be refactor and write on better a way.


Solution 1:

As you return specific component, so you can use just form 3 if blocks which if had true condition then return the component

const renderComponent = () => {
  if(id){
    return <Placeholder> { id }</Placeholder>
  }

  if(date) {
     return <Placeholder> This is date { date }</Placeholder>
  }

  if (testData === 'test'){
    return <TestDataComponent />
  }
}