CODEWITHSUNDEEP
reactjs
RJC10
RJC10

Reputation: 15

Reactjs! Make Span tag clickable

Reactjs! I am trying to make span tag clickable only where it says person.name(It should display ${person.name} in blue) and when it clicks i want to display a popup box which helps to edit the name.Please Help.

<span>
 &nbsp;(&nbsp;
  {`${person.name},${person.address} `}
 &nbsp;)
</span>

Upvotes: 0

Views: 3868

Answers (1)

Vijay Venugopal Menon
Vijay Venugopal Menon

Reputation: 1520

You can add onClick to a span and call your function. Something like this: (i have also added the styles. You can replace the hardcoded "name" with state )

 const clickspan1 = () => {
    alert('name');
  }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <span style={{color:'blue',cursor:'pointer'}} onClick={clickspan1} >Name</span>
      <span>address</span>
    </div>
  );
}

Upvotes: 1

Related Questions