CODEWITHSUNDEEP
javascripthtmlreactjsfunctionparameter-passing
user11735017
user11735017

Reputation: 13

How to pass parameters to function in the same component?

I'm trying to create nodes with different names dynamically. I've tried to so by passing values to the function in the same component. However, on the console, the parameter passed still shows as undefined.

  const ElmArchitecture = ({name}) => {
    console.log(name);
  var engine = new DiagramEngine();
  engine.installDefaultFactories();

  var model = new DiagramModel();
  var node1 = new DefaultNodeModel(name, "rgb(0,192,255)");
  let port1 = node1.addOutPort(" ");
  node1.setPosition(100, 100);

  var node2 = new DefaultNodeModel("view", "rgb(192,255,0)");
  let port2 = node2.addInPort("Model");
  node2.setPosition(400, 100);

  let link1 = port1.link(port2);
  link1.addLabel("Label1");

  var node3 = new DefaultNodeModel("Child", "rgb(0,192,255)");
  let port3 = node3.addOutPort(" ");
  node3.setPosition(50, 50);

  var node4 = new DefaultNodeModel("Parent", "rgb(192,255,0)");
  let port4 = node4.addInPort("Child");
  node4.setPosition(150, 10);

  let link2 = port3.link(port4);
  link2.addLabel("Label2");

  model.addAll(node1, node2, link1, node3, node4, link2);

  engine.setDiagramModel(model);

  return <DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />;
};

class SecondPage extends Component {
  render() 
  { 
    return (
      <div>
        <div id="secondPage_second_div">
          <ElmArchitecture>Model</ElmArchitecture>
        </div>
      </div>
    )
  }
}

export default SecondPage;

Upvotes: 0

Views: 50

Answers (2)

Shmili Breuer
Shmili Breuer

Reputation: 4147

You don't seem to pass anything to your component

Try this

<ElmArchitecture name={"Name"}>Model</ElmArchitecture>

This will make name available in your child component ElmArchitecture like this

props.name
// > Name

And you can get it in your child component ElmArchitecture like you did (through destructuring)

const ElmArchitecture = ({name}) => {...

Upvotes: 1

Marko Marinovic
Marko Marinovic

Reputation: 93

You are not passing the name parameter to ElmArchitecture component.

class SecondPage extends Component {
  render() 
  { 
    return (
      <div>
        <div id="secondPage_second_div">
          <ElmArchitecture name={"Model"}></ElmArchitecture>
        </div>
      </div>
    )
  }
}

Upvotes: 0

Related Questions