CODEWITHSUNDEEP
javascriptcssreactjsbutton
Ganzatron
Ganzatron

Reputation: 13

How can I map of buttons disappear after I click one JS

I have a table with a list of items which has a button on each row, and I want each button to only be clicked once and then disappear after they click it once, but the other buttons stay till they are clicked.

I have the button linked to an action already and I have tried putting an id with the button and doing document.getElementById('creditBtn').style.display='none however it does not hide the button.

function submitCredit(reviewerId, reviewId) {
    let socialCredit = document.getElementById('socialCredit').value;
    const body1 = { credit: socialCredit };
    axios.put('http://localhost:8080/awardCredit/:' + reviewerId, body1)
        .then(alert("Submitted Credit"));
    const body2 = { hasReward: 1 };
    axios.put('http://localhost:8080/awardCredit/hasReward/:' + reviewId, body2)
        .then( window.location.href = "http://localhost:3000/viewreviews");
    document.getElementById('creditBtn').style.display='none'
}

<h2>Completed Reviews</h2>
            <div className="writertable">
                <table>
                    <thead>
                        <tr>
                            <th>Title (Click to View Work)</th>
                            <th>Award Credit(0-1)</th>
                        </tr>
                    </thead>
                    <tbody>
                        {reviewTaskDisplay.map((val) => (
                            <tr>
                                <td onClick={(e) => viewReview(val.reviewId)}>{val.title}</td>
                                <td><input type="number" id="socialCredit" name="socialCredit" min="0" max="1" 
                                defaultValue="0"/>
                                <button  id="creditBtn" onClick={(e) => 
                                submitCredit(val.reviewer, val.reviewId)}>Submit Credit</button></td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>

Any advice on how I can go about this is appreciated

Upvotes: 0

Views: 82

Answers (1)

mc-user
mc-user

Reputation: 2061

Check this line <button id="creditBtn" onClick={(e) => submitCredit(val.reviewer, val.reviewId)}>Submit Credit</button></td>

You are creating all the buttons with the same id and in the submitCredit function, you are applying display: none to the same which will remove the buttons that are created by using the same id.

You can do something like this below.

<button  id={val.reviewId} onClick={(e) => submitCredit(val.reviewer, val.reviewId)}>Submit Credit</button></td>



// submitCredit
document.getElementById(reviewId).style.display='none'

Check this sanbbox

Upvotes: 1

Related Questions