CODEWITHSUNDEEP
javascriptnode.jsreactjsjsx
MrGuy
MrGuy

Reputation: 664

React - Instance creation and usage of a class

I'm trying to get an instance of the class ActionEditor So that I'd be able to use its methods later:

function render() {
    const toRender = responseActions.map((actionInstance) => {
        currentActionEditing=actionInstance;
        return <li>{ actionInstance === expandedAction ? <ActionEditor id={actionInstance.title} action={getActionByKey(actionInstance.actionType)} instance={actionInstance} state={actionInstance} /> : <button onClick={createOnClick(actionInstance)}>{actionInstance.title}</button>}</li>;
    });

    ReactDOM.render(
    <div>
        <div>{toRender}</div>
        <button style={styleButtonGenerate} onClick={onGenerateClick}>Generate</button>
    </div>,
    document.getElementById('root')
    );
}

I've attempted to use it through an onClick method like so:

function onGenerateClick() {
    var editor = document.getElementById(currentActionEditing.title);
    editor.prototype = ActionEditor;
    editor.methodIWantToUse();
}

But it always turns out to be null/undefined.

I understand that it's not the best example but it should be enough to demonstrate the issue.
Is there a way around this?

Upvotes: 0

Views: 59

Answers (1)

thedude
thedude

Reputation: 9814

I think what you want here is to save a ref to the component so it can be accessed, see in the example below how the sayHi method is called from the parent component.

class MyComponent extends React.Component {
    sayHi() {
      console.log('hi');
    }
    
    render() {
       return (<div>I'm a component!</div>)
    }
}

class App extends React.Component {
   render() {
   
      // just a way to show how to access a child component method.
      setTimeout(() => {
          this.node.sayHi();
      }, 1000)
      
      
      return (<MyComponent ref={(node) => this.node = node}/>)
    }
}


ReactDOM.render(<App />, document.querySelector("body"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Upvotes: 1

Related Questions