How to call functional component from another functionnal component in react js

Question

I have to call a functional component from another functional component So how can I call child functional component from a functional component in react js.

import React from "react";
import TestFunctional from "./TestFucntional";

const TestListing = props => {
  const { classes, theme } = props;

  const handleClickTestOpen = () => {
    return <TestFunctional />;
  };

  return (
    <div>
      <EditIcon
        className={classes.icon}
        onClick={handleClickTestOpen}
      />    
    </div>
  );
};

export default TestListing;

I am trying to call or render TestFucntional component on EditIcon clicked but it is not called. So How can I call component?

Thanks.

Answer 1

You just use it in your jsx as a component as usual. You can see here

 const ItemComponent = ({item}) => ( <li>{item.name}</li>) const Component1 = ({list}) => ( <div> MainComponent <ul> {list && list.map(item =><ItemComponent item={item} key={item.id}/>)} </ul> </div>) const list = [{ id: 1, name: 'aaa'}, { id: 2, name: 'bbb'}] ReactDOM.render( <Component1 list={list}/> , document.querySelector('.container') ); 

Answer 2

From the above conversation, I guess you want conditional rendering, ie after any event you want to render the child component. To do so in the parent component, it should maintain a state. If you want to use functional parent component, you can use hooks. Or you can use some prop for the conditional rendering as well. Please provide a code snippet.

This is for reference: https://reactjs.org/docs/conditional-rendering.html