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.

What do you mean by calling a component. Do you mean a function within the functional component — Shubham Khatri
– Shubham Khatri, Commented Jul 17, 2019 at 5:56
@ShubhamKhatri. how can you call a function within a functional component from a parent component? — Elaine
– Elaine, Commented Sep 10, 2020 at 21:05
@Elaine You can make use of useImperativeHandle and ref to expose the child component function to be used in parent. However, a better idea in most cases is to them move the function to parent and pass it on as props to child — Shubham Khatri
– Shubham Khatri, Commented Sep 11, 2020 at 4:14
@ShubhamKhatri. thanks for your quick response. my use case is i have a functional component with d3 tree. i want to create buttons to expand and collapse all. if i put it in the functional component the buttons are recreated too many times. So I created the buttons in the parent component render. how do I call the expand and collapse function in the child functional component from the parent? — Elaine
– Elaine, Commented Sep 11, 2020 at 15:33

aquilesb · Accepted Answer · 2019-07-17 06:03:43Z

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')
);

answered Jul 17, 2019 at 6:03

aquilesb

2,2721 gold badge20 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Test Over a year ago

Thanks It is working fine to call one component from another component. but If I have to call functional component on button click then How can I call.

aquilesb Over a year ago

Do you mean to call a function from the parent component?

Test Over a year ago

No, I have to call or render a child component from a parent component in functional component.

Test Over a year ago

import React from "react"; import EditIcon from "@material-ui/icons/Edit"; import TestFunctional from "./TestFucntional"; const TestListing = props => { function handleClickKanbanOpen(testid, testname) { return <TestFunctional />; } return ( <div> <EditIcon onClick={event => { handleClickKanbanOpen("1", "test"); }} /> </div> ); }; export default TestListing; I have to call TestFunctional component on edit icon click event.

aquilesb Over a year ago

add it as code in your question, it is easier to understand

|

banerjeesouvik · Accepted Answer · 2019-07-17 09:00:49Z

0

From the above conversation, I guess you want conditional rendering, i.e. 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

edited Jul 17, 2019 at 9:00

answered Jul 17, 2019 at 8:54

banerjeesouvik

2221 silver badge9 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related