How to call a function with arguments onclick of a button in a react component-CodePudding

Here is my function with arguments that i added in index.html in publics folder in a script tag

function displayContent(event, contentNameID) {

    let content = document.getElementsByClassName("contentClass");
    let totalCount = content.length;

    for (let count = 0; count < totalCount; count  ) {
        content[count].style.display = "none";
    }

    let links = document.getElementsByClassName("linkClass");
    totalLinks = links.length;
    for (let count = 0; count < totalLinks; count  ) {
        links[count].classList.remove("active");
    }

    document.getElementById(contentNameID).style.display = "block";
    event.currentTarget.classList.add("active");
}

Trying to call this function from click of buttons on my react component that looks like below

<button  onclick="displayContent(event, 'project2')">Meet at Campus
</button>

Please guide me with the syntax

CodePudding user response：

Here's the correct syntax

<button className="linkClass" onClick={(event)=>displayContent(event,'project2')}>Meet at Campus</button>

Edit: please note that React components return JSX

CodePudding user response：

It looks like you're trying to make some sort accordion but you shouldn't really be mixing vanilla JS with React as React needs control of the DOM.

So here's a brief example of how you might approach this using 1) state, and 2) a Panel component which comprises a button, and some content.

const { useState } = React;

function Example() {

  // Initialise state with an array of false values
  const [ state, setState ] = useState([
    false, false, false
  ]);

  // When a button in a panel is clicked get
  // its id from the dataset, create a new array using `map`
  // and then set the new state (at which point the component
  // will render again
  function handleClick(e) {
    const { id } = e.target.dataset;
    const updated = state.map((el, i) => {
      if (i === id - 1) return true;
      return false;
    });
    setState(updated);
  }

  // Pass in some props to each Panel component
  return (
    <div>
      
      <Panel
        name="Panel 1"
        active={state[0]}
        id="1"
        handleClick={handleClick}
      >
        <span className="text1">Content 1</span>
      </Panel>
      
      <Panel
        name="Panel 2"
        active={state[1]}
        id="2"
        handleClick={handleClick}
      >
        <span className="text2">Content 2</span>
      </Panel>
      
      <Panel
        name="Panel 3"
        active={state[2]}
        id="3"
        handleClick={handleClick}
      >
        <span className="text3">Content 3</span>
      </Panel>
    
    </div>
  );

}

function Panel(props) {
  
  // Destructure those props
  const {
    name,
    id,
    active,
    handleClick,
    children
  } = props;
  
  // Return a div with a button, and
  // content found in the children prop
  // When the button is clicked the handler is
  // called from the parent component, the state
  // is updated, a new render is done. If the active prop
  // is true show the content otherwise hide it
  return (
    <div className="panel">
      <button data-id={id} onClick={handleClick}>
        {name}
      </button>
      <div className={active && 'show'}>
        {children}
      </div>
    </div>
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

.panel button:hover { cursor: pointer; }
.panel { margin: 1em 0; }
.panel div { display: none; }
.panel div.show { display: block; margin: 1em 0; }
.add { margin-top: 1em; background-color: #44aa77; }
.text1 { color: darkblue; font-weight: 600; }
.text2 { color: darkgreen; font-weight: 700; }
.text3 { color: darkred; font-weight: 300; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

CodePudding user response：

Can't you use

document.getElementById("linkClass").onclick = () =>{
    displayContent();
}

by giving the element an id with same of the class?