React: komponent wyświetlany warunkowo

Stanąlem przed takim problemem:

W funkcji render w jej bloku return chciałbym mieć element - powiedzmy coś takiego

<tr className ={classFilter} onChange= {this.handleChange}>{renderInputForm}</tr>

który wyświetli się tylko wtedy, kiedy funkcje renderInputForm jest zdefiniowana w funkcji render. Dlaczego tak? Ano chciałbym aby można było tę funkcję po prostu albo dopisać albo usunąć zależy od widzimisię. Taki moduł dla ubogich. A więc w wypadku kiedy nie będzie zdefiniowana ten elemnt nie wyświetli się ale i nie spowoduje błędu. Wypróbowałem ternary w cytowanej linii kodu sprawdzając czy renderInputForm nie jest czasem niezdefiniowane, ale to nie działa , gdyż na etapie kompilacji jest tam niezdeklarowana funkcja wczesniej . Jak należałoby do tego podejść?

Definiowanie funkcji w renderze to raczej z góry zły pomysł. Zrobiłbym tak, że do props przekazałbym funkcję i w zależności od tego czy jest przekazana czy nie coś tam będzie wyświetlone.

Ogólnie warto stosować podejście podziału odpowiedzialności komponentów na komponenty, które mają logikę i takie, które mają jedynie coś renderować. Wtedy funkcję taką można zdefiniować w komponencie z logiką i przekazać jako opcjonalny props do komponentu zajmującego się prezentacją.