How to pass parameters to function in the same component?

Question

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;

Shmili Breuer · Accepted Answer · 2019-08-14 17:41:15Z

1

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}) => {...

edited Aug 14, 2019 at 17:41

answered Aug 14, 2019 at 17:33

Shmili Breuer

4,1652 gold badges21 silver badges28 bronze badges

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

Comments

Marko Marinovic · Accepted Answer · 2019-08-14 17:34:35Z

0

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>
    )
  }
}

answered Aug 14, 2019 at 17:34

Marko Marinovic

1031 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to pass parameters to function in the same component?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related