I have two files. File1 is a class component returning a class using export. File2 is a normal function component. I have a button in File2 I want to use onclick event handler to summon my file1 which I imported in file2. I'm including parts of my code.
import Comment from './commentForm';
<Button type="button" outline onClick= {***I want to call comment here***}>
Send Feedback
</Button>Comment is file1 and the button is on file2
Your button should be integrated into a wrapping component, do something like this:
import React, { useState } from 'react'
import Comment from './commentForm';
const MyComponent = () => {
const [displayed, setDisplayed] = useState()
return (
<div>
{ displayed && <Comment /> }
<Button type="button" outline onClick={() => setDisplayed(true)}>
Send Feedback
</Button>
</div>
)
}
export default MyComponent
I assume, you want to call a class component method/s in the click handler of another component, lets say you have
you can do the below
// File1.jsx
Class AClassComp extends React.Component{
constructor(){ ...... }
someMethod1=()=>{}
someMethod2=()=>{}
...
render(){.....}
}
export default AClassComp;
//File2
import 'AClassComp' from './File1.jsx'
function ParentComp(){
const classCompRef = useRef(null);
const onClickButton= (e)=> {
// you can access the Class comp methods here
// or do what ever you want using the AClassComp instance
classCompRef.current.someMethod1();
}
return (
<>
<AClassComp ref={classCompRef}/>
<Button onClick={onClickButton}
</>
)
}
when you reference a class component it returns its instance .
If you are importing a functional component from another file, you can simply add the variable in the onClick handler. It might be useful to see what 'Comment' actually does?
import Comment from './commentForm';
<Button type="button" outline onClick= {Comment()}>
Send Feedback
</Button>
EDIT: Assuming Comment looks something like this...
const Comment = () -> {
return comment
}
export default Comment
