Is there any way to block the rendering of a particular component in React?

Question

I need to block the rendering of a certain type of component, for example:

<td>{props.children}</td>

I need to capture the component that can be passed to Children and block its rendering. If I want to block the p tag, how would I do that? Is there any better way to do that?

Answer 1

If you want to filter some element from prop children React, you’ll need to use the API React.Children:

• https://reactjs.org/docs/react-api.html#reactchildren

You can then use the method React.Children.toArray() to create a array based on property children and filter only the elements you want to render.

For that, since we’re dealing with array, it is convenient to use the method filter.

Below I leave an example:

function Container(props) {
  return (
    <div>
      <p>Componentes renderizados:</p>
      <hr />
      {React.Children.toArray(props.children).filter(
        (child) => child.type !== 'h2'
      )}
    </div>
  )
}

function App() {
  return (
    <Container>
      <h1>[h1] Este componente será renderizado.</h1>
      <h2>[h2] Este componente NÃO será renderizado.</h2>
      <h3>[h3] Este componente tanbém será renderizado.</h3>
    </Container>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<div id="root"></div>

Reference:

• React.Children;
• Array.prototype.filter.