Click is not working with react-html-parse. OnClick event is not working while generating HTML from looping

const genRateRows = () => {
    let Data = ``;
    Object.keys(getProjList).map((oneKey, i) => {
        Data  = `<div key={i}>
        <div>${oneKey}</div>`;

        Object.keys(getProjList[oneKey]).forEach((val, j) => {
            let tempObj = Object.values(getProjList[oneKey][val])[0];
            Data  = ` <div className="projectCapsule d-flex" key=${j}>
                      <Col className="projectNameCapsule col-md-11">
                        <h5>${tempObj.talentName}</h5>
                      </Col>
                      <Col className="seeDetailsCapsule">
                        <button onClick={alert("ok")}>
                        See Details
                        </button>
                      </Col>
                  </div>`;
        });
        Data  = `</div>`;
    });

    return parse(Data);
};

CodePudding user response：

Assuming you meant the

CodePudding user response：

Try this

   <button ${ onClick={alert("ok")} }>

            Data  = ` <div className="projectCapsule d-flex" key=${j}>
                      <Col className="projectNameCapsule col-md-11">
                        <h5>${tempObj.talentName}</h5>
                      </Col>
                      <Col className="seeDetailsCapsule">
                        <button ${ onClick={alert("ok")} }> <-- Do this 
                        See Details
                        </button>
                      </Col>
                  </div>`;