Develop Reference

How do I add some HTML panels from my Modal to my web page the 'React way'

I have 2 Components, ApplicationOverview.js and ApplicationModal.jsx. Basically, I have a button "Add Application" on my ApplicationOverview.js page which opens the Modal in which I want to fill in some input fields and upload an image there, which is then shown on the ApplicationOverview page as a panel through predefined HTML.
The way I currently implemented it is with the .insertAdjacentHTML method which works, but on the one hand I've been told that implementing it this way makes my page vulnerable to XSS, and on the other hand, events that are added like this are not working. Is there a safe way to let React handle this by passing the HTML to ApplicationOverview.js and append it to an existing div element? Nothing I have searched for so far has worked for me.
ApplicationModal.jsx:
import React from "react";
import placeholder from "../icons/placeholder.png";
var name = "";
var comment = "";
var filename = "";
var id = 0;
const ApplicationModal = ({ setOpen }) => {
const [state, setState] = React.useState("");
const [stateComment, setStateComment] = React.useState(placeholder);
const [file, setFile] = React.useState({placeholder});
React.useEffect(() => {
function handleEscapeKey(event) {
if (event.code === "Escape") {
setOpen(false);
}
}
document.addEventListener("keydown", handleEscapeKey);
return () => document.removeEventListener("keydown", handleEscapeKey);
});
const handleComment = (e) => {
setStateComment(e.target.value);
};
const handleChange = (e) => {
setState(e.target.value);
};
//Method which adds new panels to ApplicationOverview.js
const addNewApplication = () => {
if (state !== "" && stateComment !== "") {
document
.getElementById("center")
.insertAdjacentHTML(
"beforeend",
`<div class='overview-box' id=${id}> <img class='image' src=${file} alt='placeholder'/> <div class='box-content'><h3 class='overview-h3' id='new-headline'>${state}</h3> <p class='overview-p'>${stateComment}</p><h3 class='overview-h3-second'>Connected Products</h3><h1 class='overview-h1-second'> ?/? <p class='overview-p-second'>Online</p> </h1> <div class='module-button' id='configure'> <button type='button' class='btn btn-secondary'></button> <div class='button-animation'></div> <div class='button-content'> <span class='content-text'>Configure</span> </div> </div> </div> </div>`
);
id++;
setOpen(false);
} else if (state === "" && stateComment !== "") {
document
.getElementById("center")
.insertAdjacentHTML(
"beforeend",
`<div class='overview-box' id = ${id}> <img class='image' src=${file} alt='placeholder'/> <div class='box-content'><h3 class='overview-h3' id='new-headline'>${state}</h3> <p class='overview-p'>${stateComment}</p><h3 class='overview-h3-second'>Connected Products</h3><h1 class='overview-h1-second'> ?/? <p class='overview-p-second'>Online</p> </h1> <div class='module-button' id='configure'> <button type='button' class='btn btn-secondary'></button> <div class='button-animation'></div> <div class='button-content'> <span class='content-text'>Configure</span> </div> </div> </div> </div>`
);
id++;
setOpen(false);
} else if (state !== "" && stateComment === "") {
document
.getElementById("center")
.insertAdjacentHTML(
"beforeend",
`<div class='overview-box' id=${id}> <img class='image' src=${file} alt='placeholder'/> <div class='box-content'><h3 class='overview-h3' id='new-headline'>${state}</h3> <p class='overview-p'>${stateComment}</p><h3 class='overview-h3-second'>Connected Products</h3><h1 class='overview-h1-second'> ?/? <p class='overview-p-second'>Online</p> </h1> <div class='module-button' id='configure'> <button type='button' class='btn btn-secondary'></button> <div class='button-animation'></div> <div class='button-content'> <span class='content-text'>Configure</span> </div> </div> </div> </div>`
);
id++;
setOpen(false);
} else {
alert("Please fill in atleast one value.");
}
};
function openDialog() {
document.getElementById("inputUpload").click();
}
function loadFile(e) {
console.log(e.target.files);
setFile(URL.createObjectURL(e.target.files[0]));
}
document.addEventListener("click", function(e) {
})
name = state;
comment = stateComment;
filename = file;
return (
<React.Fragment>
<div className="modalDark" style={{ paddingRight: "250px" }}>
<div class="modal-dialog">
<div class="modal-content" style={{ width: "800px" }}>
<div class="modal-close">
<div class="module-button" style={{ left: "750px" }}>
<button
class="btn btn-link "
onClick={() => setOpen(false)}
></button>
<div class="button-animation"></div>
<div class="button-content new">
<i class="icon icon-dc_close"></i>
</div>
</div>
</div>
<div class="modal-header">
<h3>Add new Application</h3>
</div>
<div class="modal-body">
<div
class="module-input form-group has-placeholder"
data-plugin="moduleInput"
style={{ bottom: "60px", width: "350px" }}
>
<label for="demo-default">Customer Name</label>
<div class="input-animation-wrapper">
<input
type="text"
id="demo-default"
class="form-control "
value={state}
maxLength="42"
placeholder="[Application Name]"
onChange={(e) => handleChange(e)}
/>
<div class="input-animation"></div>
</div>
</div>
<div
class="module-textarea form-group floating-label has-placeholder"
data-plugin="moduleInput"
style={{ bottom: "60px" }}
>
<label for="demo-3">Customer Short text</label>
<div
class="input-animation-wrapper"
style={{ width: "350px" }}
>
<textarea
id="demo-3"
class="form-control"
rows="9"
placeholder="Short description of Customer; max. 280 characters"
maxLength={180}
value={stateComment}
onChange={(e) => handleComment(e)}
style={{ width: "350px" }}
></textarea>
<div class="label-area"></div>
<div class="input-animation"></div>
</div>
</div>
<img
class="image"
alt="Customer Logo"
id="logo"
src={file}
style={{
left: "420px",
bottom: "280px",
position: "absolute",
height: "250px",
}}
/>
<div
class="module-button"
style={{
left: "500px",
bottom: "200px",
position: "absolute",
zIndex: "1",
}}
>
<button
type="file"
class="btn btn-light"
onClick={() => openDialog()}
id="fileUpload"
>
<input
type="file"
hidden={true}
accept="image/*"
id="inputUpload"
onChange={(e) => loadFile(e)}
></input>
</button>
<div class="button-animation"> </div>
<div class="button-content">
<span class="content-text">Upload Logo</span>
</div>
</div>
<div
class="module-button"
style={{ bottom: "50px", width: "100px", textAlign: "center" }}
>
<button
type="button"
class="btn btn-secondary btn"
onClick={() => addNewApplication()}
id="adding"
></button>
<div class="button-animation"></div>
<div class="button-content">
<span class="content-text">Add</span>
</div>
</div>
</div>
</div>
</div>
</div>
</React.Fragment>
);
};
export default ApplicationModal;
export { name, comment, filename };
ApplicationOverview.js:
import React from "react";
import placeholder from "../icons/placeholder.png";
import ApplicationModal from "../components/ApplicationModal.jsx";
const ApplicationOverview = () => {
const [open, setOpen] = React.useState(false);
return (
<div id="wrapper">
{open && <ApplicationModal setOpen={setOpen} />}
<div class="component-headline">
<h4 style={{ color: "gray", display: "inline" }}>
Application overview
</h4>
<div
class="module-button"
style={{
backgroundColor: "rgb(18,205,212,255)",
borderRadius: "12px",
marginLeft: "1032px",
}}
onClick={() => setOpen(true)}
>
<button type="button" class="btn btn-secondary"></button>
<div class="button-animation"></div>
<div
class="button-content"
style={{
backgroundColor: "rgb(18,205,212,255)",
borderRadius: "12px",
}}
>
<span class="content-text" style={{ color: "black" }}>
Add Application
</span>
</div>
</div>
</div>
<hr style={{ marginTop: "-20px" }} />
<!-- This is where the added content should be appended to, below are three examples -->
<!-- of hardcoded panels that should be normally added through the Modal" -->
<div class="center-content" id="center">
<div class="overview-box">
<img
class="image"
src={placeholder}
alt="placeholder"
/>
<div class="box-content">
<h3 class="overview-h3">Press</h3>
<p class="overview-p">This Application is used for maintenance</p>
<h3 class="overview-h3-second">Connected Products</h3>
<h1 class="overview-h1-second">
?/?
<p class="overview-p-second">Online</p>
</h1>
<div class="module-button" id="configure">
<button type="button" class="btn btn-secondary"></button>
<div class="button-animation"></div>
<div class="button-content">
<span class="content-text">Configure</span>
</div>
</div>
</div>
</div>
<div class="overview-box">
<img
class="image"
src={placeholder}
alt="placeholder"
/>
<div class="box-content">
<h3 class="overview-h3">Tooling Machine</h3>
<p class="overview-p">
This Application is used for drilling records
</p>
<h3 class="overview-h3-second">Connected Products</h3>
<h1 class="overview-h1-second">
?/?
<p class="overview-p-second">Online</p>
</h1>
<div class="module-button" id="configure">
<button type="button" class="btn btn-secondary"></button>
<div class="button-animation"></div>
<div class="button-content">
<span class="content-text">Configure</span>
</div>
</div>
</div>
</div>
<div class="overview-box">
<img
class="image"
src={placeholder}
alt="placeholder"
/>
<div class="box-content">
<h3 class="overview-h3">Storing Unit</h3>
<p class="overview-p">
This Application is used to store parameters
</p>
<h3 class="overview-h3-second">Connected Products</h3>
<h1 class="overview-h1-second">
?/?
<p class="overview-p-second">Online</p>
</h1>
<div class="module-button" id="configure">
<button type="button" class="btn btn-secondary"></button>
<div class="button-animation"></div>
<div class="button-content">
<span class="content-text">Configure</span>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default ApplicationOverview;
Modal Window
ApplicationOverview

You can put your useState in the ApplicationOverview.js and pass them as props to the ApplicationModal. So when the applicationModal set the useState the ApplicationOverview has the data and can simply display it.
in your ApplicationOverview:
const [state, setState] = React.useState("");
const [stateComment, setStateComment] = React.useState(placeholder);
const [file, setFile] = React.useState({placeholder});
return (
<div id="wrapper">
{open && <ApplicationModal setOpen={setOpen} setState={setState} state={state} setFile={setFile} file={file} setStateComment={setStateComment} stateComment={stateComment}/>
rest of your HTML
)
then where you want to display the result in the ApplicationOverview you can:
{state && stateComment { display what you want}}

Conditional Rendering in ReactJS Return section

I am looking for some help with conditional rendering inside of the return of my ReactJS page.
Here is what my code looks like:
import React from "react";
import NoActiveTracker from "../components/NoActiveTracker.js";
import NoCompletedTracker from "../components/NoCompletedTracker.js";
var bg = {
background: "#6F42C1"
}
class TrackerGeneralPage extends React.Component {
state = {
id: '',
active: [],
completed: [],
completedDateNow: '',
newStatus: 'Complete'
};
render() {
const { active, completed } = this.state
// if this.state.active.length > 0 ? { ---- I can do this with the return and set an else that will work fine but I am trying to do it for each table
return (
<>
<div>
{/* Active Trackers */}
<div id="toggle-active" className="">
<div className="my-4">
<table className="table table-hover table-bordered mb-3">
<thead className="thead-dark">
<tr>
<th scope="col" className="h5">Active</th>
<th scope="col">Name</th>
<th scope="col">Regulation</th>
<th scope="col">Due On</th>
<th scope="col">Assigned</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
{/* Need to perform conditional rending here with <NoActiveTrackers /> */}
{active.map(item => (
<>
<tr key={item.id}>
<th scope="row" className="dropdown">
<a className="btn btn-dark" data-toggle="collapse" href={"#a" + item.id} role="button" aria-expanded="false" aria-controls="item">Expand</a>
</th>
<td>{item.name}</td>
<td>{item.reg}</td>
<td>{item.dateDue}</td>
<td>{item.assigned}</td>
<td>{item.status}</td>
</tr>
<tr>
<td id={"a" + item.id} className="collapse hiddenRow" colSpan="6" rowSpan="1">
<div class="row">
<div class="col-sm">
<div class="card text-white text-center" style={bg}>
<div class="card-body">
<h5 class="card-title text-white font-weight-bold">Occurrence</h5>
<p class="card-text">{item.occurrence}</p>
<p>Next Expected Occurrence: Unknown</p>
</div>
</div>
</div>
<div class="col-sm">
<div class="card bg-light text-center">
<div class="card-body">
<h5 class="card-title font-weight-bold">Completed By</h5>
<p class="card-text">{item.completer} on {item.dateCompleted}</p>
<button className="btn btn-dark" onClick={() => this.handleUpdateTracker(item)} >Mark as Complete <img src="https://icon.now.sh/done_all/ffffff" width="25" height="25" className="d-inline-block align-top" alt="Complete Tracker" /></button>
</div>
</div>
</div>
<div class="col-sm">
<div class="card text-center">
<div class="card-body text-white bg-dark">
<h5 class="card-title text-white font-weight-bold">Description</h5>
<p class="card-text">{item.description}</p>
<button className="btn btn-light ml-1" onClick={() => this.handleDeleteTracker(item.id)} >Delete Tracker<img src="https://icon.now.sh/delete_forever" width="25" height="25" className="d-inline-block align-top" alt="Delete Tracker" /></button>
</div>
</div>
</div>
</div>
</td>
</tr>
</>
))}
</tbody>
</table>
</div> {/* End Table Section */}
</div> {/* End Active Toggle */}
{/* Completed Trackers */}
<div id="toggle-active" className="">
<div className="my-4">
<table className="table table-hover table-bordered mb-3">
<thead className="thead-dark">
<tr>
<th scope="col" className="h5">Completed</th>
<th scope="col">Name</th>
<th scope="col">Regulation</th>
<th scope="col">Due On</th>
<th scope="col">Assigned</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
{/* Need to perform conditional rending here with <NoCompleteTrackers /> */}
{completed.map(item => (
<>
<tr key={item.id}>
<th scope="row" className="dropdown">
<a className="btn btn-dark" data-toggle="collapse" href={"#a" + item.id} role="button" aria-expanded="false" aria-controls="item">Expand</a>
</th>
<td>{item.name}</td>
<td>{item.reg}</td>
<td>{item.dateDue}</td>
<td>{item.assigned}</td>
<td>{item.status}</td>
</tr>
<tr>
<td id={"a" + item.id} className="collapse hiddenRow" colSpan="6" rowSpan="1">
<div class="row">
<div class="col-sm">
<div class="card text-white text-center" style={bg}>
<div class="card-body">
<h5 class="card-title text-white font-weight-bold">Occurrence</h5>
<p class="card-text">{item.occurrence}</p>
</div>
</div>
</div>
<div class="col-sm">
<div class="card bg-light text-center">
<div class="card-body">
<h5 class="card-title font-weight-bold">Completed By</h5>
<p class="card-text">{item.completer} on {item.dateCompleted}</p>
</div>
</div>
</div>
<div class="col-sm">
<div class="card text-center">
<div class="card-body text-white bg-dark">
<h5 class="card-title text-white font-weight-bold">Description</h5>
<p class="card-text">{item.description}</p>
</div>
</div>
</div>
</div>
</td>
</tr>
</>
))}
</tbody>
</table>
</div> {/* End Table Section */}
</div> {/* End Completed Toggle */}
{/* Conditional Rendering Components are here just so I can visually seem them at the bottom of the page no matter way, will be removed once I figure out the conditional rendering of them */}
<NoActiveTracker />
<NoCompletedTracker />
</div> {/* End Container */}
</>
)
}
}
export default TrackerGeneralPage;
I can do if this.state.active.length > 0 ? { with the entire return ( and an else after that contains one of my components like NoActiveTrackers but since I have two tables, that means I would need a 4x if statement: one return if both trackers had items, one return if active had items but completed did not, one return if completed had items but active did not, and one return if both trackers did not have items.
How can I do conditional rendering directly before the map(s)?
Regards

Because you have 2 cases that have the same logic for displaying components, you can abstract this logic into a different component, for eg. a List component that takes your ListItem and NoItems as a prop and renders it.
const { render } = ReactDOM;
function Active() {
return <p>Definition of an active List item here</p>
}
function Completed() {
return <p>Definition of an active Completed item here</p>
}
function NoActive() {
return <p>No active list items to see here</p>
}
function NoCompleted() {
return <p>No completed list items to see here</p>
}
function List({
array,
listItem: ListItem, /*has start with capital letter */
noItems: NoItems,
}) {
if(array.length) {
return array.map((item, index) => <ListItem key={index} />);
} else {
return <NoItems />
}
}
function App() {
const activeItems = [1, 2];
const completedItems = [];
return (
<main>
<List array={activeItems} listItem={Active} noItems={NoActive} />
<List array={completedItems} listItem={Completed} noItems={NoCompleted} />
</main>
)
}
render(<App />, document.getElementById("root"))
<div id="root" />
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>

I think you are looking for something like this. active.length &&.
If active array is empty, active.map will not be run here.
{/* Need to perform conditional rending here with <NoActiveTrackers /> */}
{active.length && active.map(item => ( ...

Passing my form component to another component | Reactjs

Hi i have a form component where my form data is, I'm trying to pass it into another component called "airtime-data-mtn.js" to make up part of a whole page. i.e the form is just a part of the whole page, the airtime-data component already has information rendered, page information. Note: I had done something similar where i passed a form into another component but there in the render method I was not rendering other information about the page just the form alone
since it is a form i simply tried passing it like <mtnform onSubmit={this.handleSubmit}/> but I noticed instead of it to be blue to show it is a form it's doesn't change color. I believe it is seeing it as JSX and not a form. When I add a route and use the form as the component it renders the form as expected but when i try to pass it into the airtime component, it does not work as expected
render() {
return (
<form
name="airtime-form"
className="airtime-form"
onSubmit={this.handleSubmit}
>
<div style={{ margin: "20px 0" }}>
<select
ref="constantVal"
className="select"
onChange={this.handleDropDownChange}
>
{this.state.obj.map(item => {
return (
<option key={item.Id} value={item.Name}>
{item.Name}
</option>
);
})}
</select>
</div>
<div style={{ margin: "20px 0" }}>
<input
type="number"
value={this.state.Price}
onChange={this.handlePriceChange}
placeholder="Amount"
/>
</div>
<div style={{ margin: "20px 0" }}>
<input
type="text"
value={this.state.ParameterRegEx}
onChange={this.handleNumberChange}
placeholder="Phone Number"
/>
</div>
<div style={{ margin: "20px 0" }}>
<input
type="text"
value={this.state.Email}
onChange={this.handleEmailChange}
/>
</div>
<div style={{ margin: "20px 0", fontSize: "20px" }}>
*Email is required for notification purposes
</div>
<div>
<button type="submit" className="btn btn-submit">
Submit
</button>
</div>
</form>
);
}
render() {
const { isLoaded } = this.state;
if (!isLoaded) {
return (
<div className="center">
<img src={Spinner} alt="loading spinner" />
</div>
);
} else {
return (
<body
style={{
backgroundImage: "url(" + background + ")",
backgroundSize: "cover",
backgroundRepeat: "no-repeat"
}}
>
<section>
<div className="row">
<div
className="col span-2-of-3"
style={{ backgroundColor: "#3C444C" }}
>
<div className="row">
<h2>
<img
src={mtn}
alt="mtn logo"
style={{ display: "inline-block" }}
/>
Airtime & Data
</h2>
</div>
<div className="row">
<mtnform></mtnform>
</div>
</div>
<div className="col span-1-of-3">
<div className="rhs-content">
<div className="row">
<h2 className="text-transform">use payarena today</h2>
</div>
<div className="row">
<h3 className="select-headings">Airtime & Data</h3>
<form onSubmit={this.onUrlSelected.bind(this)}>
<select ref="items" className="select">
{this.state.airtime.map(item => {
return (
<option key={item.id} value={item.Url}>
{item.Name}
</option>
);
})}
</select>
<button type="submit" className="btn btn-submit">
Go
</button>
</form>
</div>
<div className="row">
<h3 className="select-headings">Bills Payment</h3>
<form onSubmit={this.onSecondUrlSelected.bind(this)}>
<select ref="items1" className="select">
{this.state.bills.map(item => {
return <option value={item.Url}>{item.Name}</option>;
})}
</select>
<button type="submit" className="btn btn-submit">
Go
</button>
</form>
</div>
<div className="row">
<h3 className="select-headings">Collections & Levies</h3>
<form onSubmit={this.onThirdUrlSelected}>
<select ref="items2" className="select">
{this.state.collectionsAndLevies.map(item => {
return <option value={item.Url}>{item.Name}</option>;
})}
</select>
<button type="submit" className="btn btn-submit">
Go
</button>
</form>
</div>
<div className="row">
<h3 className="select-headings">The Lotteries</h3>
<form onSubmit={this.onFourthUrlSelected}>
<select ref="items3" className="select">
{this.state.lottery.map(item => {
return <option value={item.Url}>{item.Name}</option>;
})}
</select>
<button type="submit" className="btn btn-submit">
Go
</button>
</form>
</div>
<div className="row">
<p>Pay using any of the following</p>
<img src={logomask} alt="logo mask" className="logo-mask" />
</div>
</div>
{/*eslint-disable-next-line react/jsx-no-duplicate-props*/}
<section className="row" className="next-rhs">
<p>Download the Payarena app</p>
<ul className="main-nav">
<li>
<img src={googlestore} alt="google play store" />
</li>
<li>
<img src={appstore} alt="app store" />
</li>
</ul>
</section>
</div>
</div>
</section>
<footer className="footer">
<div className="row">
<div className="col span-1-of-3">
<img
src={palogo}
alt="pa-logo"
style={{
display: "block",
marginLeft: "30px;"
}}
/>
<p>An innovation from Unified Payments Limited</p>
</div>
<div className="col span-2-of-3">
<div className="row">
<div className="col span-1-of-3">
<h2>Page Links</h2>
<p>
{" "}
<a
href="/about"
style={{ textDecoration: "none", color: "white" }}
>
About Us
</a>
</p>
<p>
{" "}
<a
href="/services"
style={{ textDecoration: "none", color: "white" }}
>
Our Services
</a>
</p>
<p>
{" "}
<a
href="/about"
style={{ textDecoration: "none", color: "white" }}
>
The Team
</a>
</p>
</div>
<div className="col span-1-of-3">
<h2>Support Links</h2>
<p>
<a
href="/contact"
style={{ textDecoration: "none", color: "white" }}
>
Contact Us
</a>
</p>
<p>
<a
href="/faqs"
style={{ textDecoration: "none", color: "white" }}
>
FAQs
</a>
</p>
</div>
<div className="col span-1-of-3">
<h2>Social Links</h2>
<p>
{" "}
<a
href="https:/www.twitter.com"
style={{ textDecoration: "none", color: "white" }}
>
<i
className="icon ion-logo-twitter"
style={{ color: "white", margin: "0 10px" }}
/>
Twitter
</a>
</p>
<p>
{" "}
<a
href="https://www.facebook.com"
style={{ textDecoration: "none", color: "white" }}
>
<i
className="icon ion-logo-facebook"
style={{ color: "white", margin: "0 10px" }}
/>
Facebook
</a>
</p>
<p>
{" "}
<a
href="https://www.linkedin.com"
style={{ textDecoration: "none", color: "white" }}
>
<i
className="icon ion-logo-linkedin"
style={{ color: "white", margin: "0 10px" }}
/>
Linkedin
</a>
</p>
</div>
</div>
</div>
</div>
</footer>
<footer
className="footer"
style={{ backgroundColor: "white", color: "black" }}
>
<div className="row">
<p style={{ float: "left" }}>
Copyright © Unified Payments 2019.
</p>
</div>
</footer>
</body>
);
}
}
Please any help would be fantastic. I'm stuck and trumped

How can I get a dynamic value of href and id's of the card in React JS

This is my first question in stackoverflow, I am still learning how to code and it might be a newbie question.
But, is it possible to have a dynamic href and id values when I want to map my data with axios to become cards? Because if I run my code, the card that will work (one that can collapse) is just the first one, the others did not work. This is my code (sorry the code isnt the same with the real file in my vscode cos my real file was becoming a chaos.)
render() {
const mobillist = this.state.dataku.map((item, index) => {
return (
<div className="container-fluid" style={{ marginTop: "100px" }}>
<div id="accordion">
<div className="card">
<div className="card-header">
<a className="card-link" data-toggle="collapse" href="#colla">
{item.model} - {item.tahun}
</a>
</div>
<div id="colla" className="collapse show" data-parent="#accordion">
<div className="card-body">
<div className="row">
<div className="col">
<h4> ini menu 1 </h4>
</div>
<div className="col">
<center> <h4> ini menu 2 </h4></center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
return (
<div>
{mobillist}
</div>

You can use unique ID for every href using index value in the map and also map the index in accordion div. See the below code for sample
render() {
const mobillist = this.state.dataku.map((item, index) => {
return (
<div className="container-fluid" style={{ marginTop: "100px" }}>
<div id="accordion">
<div className="card">
<div className="card-header">
<a className="card-link" data-toggle="collapse" href={"#colla"+ index}>
{item.model} - {item.tahun}
</a>
</div>
<div id={"colla"+ index} className="collapse show" data-parent="#accordion">
<div className="card-body">
<div className="row">
<div className="col">
<h4> ini menu 1 </h4>
</div>
<div className="col">
<center> <h4> ini menu 2 </h4></center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
return (
<div>
{mobillist}
</div>

Error dynamically adding table rows in reactJs [duplicate]

This question already has answers here:
ES6 array map doesn't return anything: ReactJS
(2 answers)
Closed 4 years ago.
I am trying to create a reactJs page that allows an admin add a user to a platform. Now, instead of submitting the form for each new user, I want the admin to be able to add as many users as possible before submitting the form. By default, one table row containing input fields is displayed and then on click of the add button, a new row is added and the admin can fill the necessary details. However, I can't get my page to show the default row and the add button does not work either and unfortunately, my page throws no error. Here is my code:
export default class Admins extends React.Component{
constructor(props){
super(props);
this.state = {
errors : '',
success : '',
rows : [1]
}
this.addRow = this.addRow.bind(this);
this.fetchRows = this.fetchRows.bind(this);
}
addRow(){
var last = this.state.rows[this.state.rows.length-1];
var current = last + 1;
this.setState({
rows : this.state.rows.concat(current)
});
}
fetchRows(){
this.state.rows.map((row, index) => (
//console.log(row, index)
<tr key={row}>
<td className="text-center">
<button type="button" data-toggle="tooltip" className="btn btn-xs btn-danger"
data-original-title=""><i className="fa fa-trash"></i>
</button>
</td>
<td>
<input type="text" className="form-control"/>
</td>
<td>
<input type="text" className="form-control"/>
</td>
<td>
<input type="text" className="form-control"/>
</td>
</tr>
));
}
render(){
return(
<div>
<Top/>
<SideBar/>
<div className="breadcrumb-holder">
<div className="container-fluid">
<ul className="breadcrumb">
<li className="breadcrumb-item"><Link to="/">Dashboard</Link></li>
<li className="breadcrumb-item active">Admins</li>
</ul>
</div>
</div>
<section className="forms">
<div className="container-fluid">
<header>
<h3 className="h5 display">Admins</h3>
</header>
<div className="row">
<div className="col-lg-6">
<h5 className="text-danger">{this.state.errors}</h5>
<h5 className="text-success">{this.state.success}</h5>
</div>
</div>
<div className="row">
<div className="col-lg-6">
<div className="card">
<div className="card-header d-flex align-items-center">
<h5></h5>
</div>
<div className="card-body">
<table className="table table-bordered">
<thead>
<tr>
<th width="5%">Actions</th>
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>
</thead>
<tbody>
{this.fetchRows()}
<tr>
<td className="text-center">
<button type="button" onClick={this.addRow} data-toggle="tooltip" className="btn btn-xs btn-primary"
data-original-title=""><i className="fa fa-plus"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
);
}
}

You are not returning anything from fetchRows. Return it or simply put it directly in the render method and it will work as expected.
Example
class Admins extends React.Component {
state = {
errors: "",
success: "",
rows: [1]
};
addRow = () => {
var last = this.state.rows[this.state.rows.length - 1];
var current = last + 1;
this.setState({
rows: this.state.rows.concat(current)
});
};
render() {
return (
<div>
<div className="breadcrumb-holder">
<div className="container-fluid">
<ul className="breadcrumb">
<li className="breadcrumb-item active">Admins</li>
</ul>
</div>
</div>
<section className="forms">
<div className="container-fluid">
<header>
<h3 className="h5 display">Admins</h3>
</header>
<div className="row">
<div className="col-lg-6">
<h5 className="text-danger">{this.state.errors}</h5>
<h5 className="text-success">{this.state.success}</h5>
</div>
</div>
<div className="row">
<div className="col-lg-6">
<div className="card">
<div className="card-header d-flex align-items-center">
<h5 />
</div>
<div className="card-body">
<table className="table table-bordered">
<thead>
<tr>
<th width="5%">Actions</th>
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>
</thead>
<tbody>
{this.state.rows.map((row, index) => (
//console.log(row, index)
<tr key={row}>
<td className="text-center">
<button
type="button"
data-toggle="tooltip"
className="btn btn-xs btn-danger"
data-original-title=""
>
<i className="fa fa-trash" />
</button>
</td>
<td>
<input type="text" className="form-control" />
</td>
<td>
<input type="text" className="form-control" />
</td>
<td>
<input type="text" className="form-control" />
</td>
</tr>
))}
<tr>
<td className="text-center">
<button
type="button"
onClick={this.addRow}
data-toggle="tooltip"
className="btn btn-xs btn-primary"
data-original-title=""
>
<i className="fa fa-plus" />
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
);
}
}