-1

I am learning react and I am trying to call a class from a method. Here is what I have came up so far

class Pop extends React.Component{
  render(){
    return (
      <div>
        <button onClick={() => { this.desit("data")} }>Componant Caller</button>
      </div>
    )
  }  
  desit(data){
    <Test info={data}/> 
  }  
}

class Test extends React.Component{
  render(){
    return 
    <div>{alert(this.props.info)}</div>
  }
}

ReactDOM.render(<Pop />,document.getElementById("targ"));

Help please?

jason
  • 45
  • 6
  • Where do you want `` to render? You could store something in `this.state` of `Pop`, change that value in the `onClick`, and then check `this.state` inside `render`. – Ross Allen Jul 21 '17 at 22:34
  • What exactly are you trying to accomplish? Are you trying to render `` in the document? Are you trying to call the function in one component from another component? – jered Jul 21 '17 at 22:38
  • @ross are you saying that I have access of 'this.state' of 'Pop' from 'Test'? – jason Jul 21 '17 at 22:38
  • try returning a value from your desit function. – Etherealm Jul 21 '17 at 22:39
  • to make my achievement more tangible, I have updated my syntax – jason Jul 21 '17 at 22:40
  • What you have is not wrong. `desit` will be called. But putting ` ` won't have any visible effect. That's why you gave to explain what it is that you want to achieve. – Felix Kling Jul 21 '17 at 22:42
  • do you want to add `Test` inside `Pop` when button clicked? – Ali Faris Jul 21 '17 at 22:42
  • basically what I want to do is pass data from `Pop` to `Test` when a button is clicked – jason Jul 21 '17 at 22:42
  • 1
    *"basically what I want to do is pass data from Pop to Test"* You are doing that correctly. But again, placing `` there won't have any visible effect. **Where do you want `` to appear in your UI?** If your question is only about *calling a method*, then that what you have is correct and there is nothing for us to do. – Felix Kling Jul 21 '17 at 22:43
  • `
    {alert(this.props.info)}
    ` is also weird. What are you trying to accomplish here?
    – Felix Kling Jul 21 '17 at 22:46
  • @Felix that alert part is meant to check if I have successfully pass the data – jason Jul 21 '17 at 22:50
  • Well, `` is never rendered anywhere, so that part will never get called. As I said, putting `` in some random location won't render it. React has to know *where* it should be rendered. – Felix Kling Jul 21 '17 at 22:51

1 Answers1

0

You want to have a method in a separate class and trigger it from the Component?

Don't use another component, but you can create a regular class with some logic:

class Test
{
  test() {
    alert('success!');
  }
}

In the desit method, you can now invoke Test.test(), like this:

desit() {
  var amazingTest = new Test();
  amazingTest.test();
}

You could use a static method as well:

class Test
{
  static test() {
    alert('success!');
  }
}

// and the desit method:
desit() {
  Test.test();
}
dejakob
  • 2,062
  • 14
  • 21