I am trying to display data so for example if "brkalk" is selected in the tag it only displays "brkalk" table row and its content. I tried doing ? and : along with useState but it did not work because I have the .map function so I had problems with closing "}". Some tags and table names are in Bosnian so don't worry about that :)
import React, { useState, useEffect } from 'react'
import axios from 'axios'
import "./Modal.css";
export default function Modal() {
const [modal, setModal] = useState(false);
const [database, setDatabase] = useState();
const getData = async () => {
try {
await axios.get("http://localhost:3001/data").then((response) => {
setDatabase(response.data)
})
}
catch (e) {
console.log(e)
}
}
useEffect(() => {
getData()
}, [])
const toggleModal = () => {
setModal(!modal);
};
if (modal) {
document.body.classList.add('active-modal')
} else {
document.body.classList.remove('active-modal')
}
return (
<>
<button onClick={toggleModal} className="btn-modal">
Tabela gotovinskih racuna
</button>
{modal && (
<div className="modal">
<div onClick={toggleModal} className="overlay"></div>
<div className="modal-content">
<h2>Tabela gotovinskih racuna</h2>
<select name="filters" id="filters">
<option value="brkalk">brkalk</option>
<option value="sifpar">sifpar</option>
</select>
<table style={{
border: "2px solid black",
margin: "auto",
marginTop: "25px",
marginBottom: "5px",
width: "95%"
}}>
<thead>
<tr>
<th>brkalk</th>
<th>datum</th>
<th>uempl</th>
<th>siforg</th>
<th>ziral</th>
<th>kartica</th>
<th>obust</th>
<th>sifpar</th>
<th>zakljucan</th>
<th>povrat</th>
<th>brkalkfisk</th>
<th>brkalkpov</th>
<th>regbroj</th>
<th>vozac</th>
<th>sifkart</th>
<th>idslog</th>
<th>idfirma</th>
<th>racunar</th>
<th>iznosf</th>
</tr>
</thead>
{database?.map((i) =>
<tbody style={{
textAlign: "center",
}}>
<tr>
<td>{i.brkalk}</td>
<td>{i.datum}</td>
<td>{i.uempl}</td>
<td>{i.siforg}</td>
<td>{i.ziral}</td>
<td>{i.kartica}</td>
<td>{i.obust}</td>
<td>{i.sifpar}</td>
<td>{i.zakljucan}</td>
<td>{i.povrat}</td>
<td>{i.brkalkfisk}</td>
<td>{i.brkalkpov}</td>
<td>{i.regbroj}</td>
<td>{i.vozac}</td>
<td>{i.sifkart}</td>
<td>{i.idslog}</td>
<td>{i.idfirma}</td>
<td>{i.racunar}</td>
<td>{i.iznosf}</td>
</tr>
</tbody>
)}
</table>
<button className="close-modal" onClick={toggleModal}>
CLOSE
</button>
</div>
</div>
)}
</>
);
}
Related
everyone. I can't write the code to close the modal window in React. I don't know how this can be done, I need that when clicking on the "Add" button, a modal window opens, the user enters the data, and clicking on the "Add product" button, the window closes immediately
Code:
import React from 'react';
import CatalogProducts from "./CatalogProducts";
import Info from "./Info";
import CreateProduct from "./CreateProduct";
import {Button} from 'react-bootstrap';
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import '../css/popup.css'
const Main = () => {
return (
<div>
<div className="d-flex justify-content-between" style={{ width: '33rem', margin: '10px' }}>
<Popup contentStyle={{width: "unset", backgroundColor: "red", border: "none", background: "none"}}
trigger={<Button> Add </Button>} modal>
<CreateProduct/>
</Popup>
<input placeholder={'search'}/>
<span>sort by</span>
<input/>
</div>
<CatalogProducts></CatalogProducts>
<Info></Info>
</div>
);
};
export default Main;
import React from 'react';
import {useDispatch} from "react-redux";
import {addProductAction} from "../action/productsAction";
import {ConfigProduct} from "../Utils/configProduct";
import '../css/popup.css'
import '../css/flex.css'
import {Button} from "react-bootstrap";
const CreateProduct = () => {
const dispatch = useDispatch()
const newProduct = new ConfigProduct()
function addProd() {
dispatch(addProductAction(newProduct))
}
return (
<div className = "popup">
<h2 style={{textAlign: "center", color: "red"}}>New product</h2>
<input className="item" placeholder="id" onChange={e => newProduct.idProd = e.target.value}/>
<input className="item" placeholder="info" onChange={e => newProduct.name = e.target.value}/>
<input className="item" placeholder="price" onChange={e => newProduct.infoProd = e.target.value}/>
<input className="item" placeholder="date" onChange={e => newProduct.price = e.target.value}/>
<input className="item" placeholder="enter url" onChange={e => newProduct.date = e.target.value}/>
<p>
<Button onClick={addProd}>Add product</Button>
</p>
</div>
);
};
export default CreateProduct;
I tried setting a flag to change the component class. but it didn't work out for me
In your main.js
[open, setOpen] = useState(false)
const closeModal = () => setOpen(false)
return (
<div>
<div className="d-flex justify-content-between" style={{ width: '33rem', margin: '10px' }}>
<Popup
contentStyle={
{width: "unset", backgroundColor: "red", border: "none", background: "none"}
}
trigger={<Button> Add </Button>}
modal
>
<CreateProduct closeModal={closeModal}/>
</Popup>
<input placeholder={'search'}/>
<span>sort by</span>
<input/>
</div>
<CatalogProducts></CatalogProducts>
<Info></Info>
</div>
)
and inside your CreateProduct.js
const CreateProduct = ({ closeModal }) => {
// your code
function addProd() {
dispatch(addProductAction(newProduct))
closeModal()
}
// rest of your code
)
I have created a CRUD application and successfully it is performing all the operations.
But when I try to create a modal so that it shows up a warning either to delete the id or not on clicking delete. And If I try to delete a particular id from the modal I'm unable to delete the selected item, else it is deleted the latest id in the list.
What might be the problem that is making me not delete a particular id from the list only when creating a modal.
Help me how I can make it work.
This is the button to open the warning modal:
const [open, setOpen] = useState(false);
const toggle = () => setOpen(!open);
<button onClick={toggle}>
<MdIcons.MdDelete color='black' fontSize="1.3rem"/>delete</button>
This is the modal that opens after clicking delete:
<Modal isOpen={open} toggle={toggle}>
<ModalHeader toggle={toggle}>Warning</ModalHeader>
<ModalBody>Are you sure to delete this id from the list...</ModalBody>
<ModalFooter>
<Button onClick={() => onDelete(data.id)}>YES</Button>
<Button onClick={toggle}>Cancel</Button>
</ModalFooter>
</Modal>
In the above modal I have give the onclick event for button YES to delete the id selected, but the delete functionality is not working when I use it on a modal.
These are the button functionalities:
const getData = () => {
axios.get(`https://62c45bb0abea8c085a73b996.mockapi.io/Reactcrud`)
.then((getData) => {
setAPIData(getData.data);
})
}
const onDelete = (id) => {
axios.delete(`https://62c45bb0abea8c085a73b996.mockapi.io/Reactcrud/${id}`)
.then(() => {
getData();
})
}
Please help me how I can achieve the functionality of deleting the particular id after modal opens, and let me know if you need any more details regarding my code.
I am new to react, i don't know if my explanation will be correct, my theory is that the problem was this: You were rendering the modal for every record, and only the last modal remained.
I put the modal outside the loop, and i declared a useState to track the selected id to delete, it worked =D
Read.js :
import axios from "axios";
import React, { useEffect, useState } from "react";
import { Table, Button, List, Popup, Grid, Icon, Dropdown, Menu, Header } from "semantic-ui-react";
import { useNavigate, Link } from "react-router-dom";
import * as MdIcons from "react-icons/md";
import * as AiIcons from "react-icons/ai";
import * as FiIcons from "react-icons/fi";
import { Modal, ModalFooter, ModalHeader, ModalBody } from "reactstrap";
import SideMenu from "../SideMenu/SideMenu";
function Read() {
const [APIData, setAPIData] = useState([]);
const [idToDelete, setIdToDelete] = useState(0);
useEffect(() => {
axios.get(`https://62c45bb0abea8c085a73b996.mockapi.io/Reactcrud`).then((response) => {
console.log(response.data);
setAPIData(response.data);
});
}, []);
const setData = (data) => {
let {
id,
image,
companyName,
email,
companyNumber,
uniqueNumber,
lineofBusiness,
companyRevenue,
openingTime,
closingTime,
discount,
rating,
address1,
address2,
pincode,
area,
city,
state,
country,
} = data;
localStorage.setItem("ID", id);
localStorage.setItem("Image", image);
localStorage.setItem("Email", email);
localStorage.setItem("Company Name", companyName);
localStorage.setItem("Company Number", companyNumber);
localStorage.setItem("Unique Number", uniqueNumber);
localStorage.setItem("Line of Business", lineofBusiness);
localStorage.setItem("Company Revenue", companyRevenue);
localStorage.setItem("Opening Time", openingTime);
localStorage.setItem("Closing Time", closingTime);
localStorage.setItem("Discount", discount);
localStorage.setItem("Rating", rating);
localStorage.setItem("Address1", address1);
localStorage.setItem("Address2", address2);
localStorage.setItem("Pincode", pincode);
localStorage.setItem("Area", area);
localStorage.setItem("City", city);
localStorage.setItem("State", state);
localStorage.setItem("Country", country);
};
const getData = () => {
axios.get(`https://62c45bb0abea8c085a73b996.mockapi.io/Reactcrud`).then((getData) => {
setAPIData(getData.data);
});
};
const onDelete = () => {
axios
.delete(`https://62c45bb0abea8c085a73b996.mockapi.io/Reactcrud/${idToDelete}`)
.then(() => {
navigate("/company/list");
toggle();
})
.then(() => {
getData();
});
};
let navigate = useNavigate();
const addUser = () => {
navigate("/company/create");
};
const [open, setOpen] = useState(false);
const toggle = () => setOpen(!open);
const [search, setSearch] = useState("");
return (
<>
<div className="container-fluid">
<div className="row">
<div className="col-lg-12" style={{ marginLeft: "-11px" }}>
<SideMenu />
</div>
</div>
<div className="row">
<div className="col-lg-3"></div>
<div className="col-lg-6">
<Button primary style={{ width: "150px", height: "40px" }} onClick={addUser}>
Add Company
</Button>
<input
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search by any Category"
style={{
position: "absolute",
width: "260px",
height: "40px",
marginLeft: "285px",
border: "none",
fontSize: "15px",
padding: "8px",
borderRadius: "20px 20px 20px 20px",
}}
/>
<table style={{ width: "700px", height: "200px" }}>
<thead style={{ margin: "50px" }}>
<tr>
<th style={{ textAlign: "center" }}>List of Companies</th>
</tr>
</thead>
{APIData.filter((data) =>
Object.values(data).some((value) => value.toLowerCase().includes(search.toLowerCase()))
).map((data, id) => {
return (
<>
<tbody key={id}>
<li
style={{
minHeight: "140px",
borderRadius: "5px",
margin: "20px 0px",
listStyle: "none",
padding: "25px",
backgroundColor: "white",
boxShadow: "0 0 20px 0px rgba(0,0,0,0.2)",
}}
>
<tr>
<Link to="/company/view">
<button
style={{
background: "transparent",
border: "none",
color: "blue",
}}
onClick={() => setData(data)}
>
{data.companyName}
</button>
</Link>
</tr>
<tr>{data.companyNumber}</tr>
<tr>{data.uniqueNumber}</tr>
<tr>{data.lineofBusiness}</tr>
</li>
<div
style={{
position: "absolute",
marginLeft: "580px",
marginTop: "-120px",
}}
>
<Dropdown
icon={
<AiIcons.AiOutlineEllipsis
style={{
color: "black",
fontSize: "1.3rem",
marginTop: "15px",
marginLeft: "30px",
border: "1px solid black",
width: "30px",
height: "30px",
borderRadius: "50%",
}}
/>
}
pointing="top right"
>
<Dropdown.Menu>
<Dropdown.Item icon="edit" text="Edit">
<Link to="/company/edit">
<button
onClick={() => setData(data)}
style={{
background: "transparent",
border: "none",
}}
>
<FiIcons.FiEdit color="black" fontSize="1.3rem" /> Edit
</button>
</Link>
</Dropdown.Item>
<Dropdown.Item icon="delete" text="Delete">
<button
onClick={() => {
setIdToDelete(data.id);
toggle();
}}
style={{
background: "transparent",
border: "none",
}}
color="red"
>
<MdIcons.MdDelete color="black" fontSize="1.3rem" />
delete
</button>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</tbody>
</>
);
})}
</table>
<Modal isOpen={open} toggle={toggle}>
<ModalHeader toggle={toggle}>Warning</ModalHeader>
<ModalBody>Are you sure to delete this id from the list...</ModalBody>
<ModalFooter>
<Button color="red" onClick={onDelete}>
Okay
</Button>
<Button color="primary" onClick={toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
</div>
</div>
</>
);
}
export default Read;
I have a component that renders a table with data from a database, I am experiencing a problem where I cant render the second component called EditButton bottom of the code, I managed to render the 1st component DeleteButton bottom of the code, but when I try to render another button I get errors. The goal is to render another button in the table. Thanks in advance :)
import React, { useState } from 'react';
import { Button } from 'semantic-ui-react';
import { currentloginid } from '../login/loginid.js';
import { deletequestion } from '../question/deletequestion.js';
import { editanswer } from '../answer/editanswer.js';
export const ViewQuestionComponent = () => {
let [state, setState] = useState([]);
const handleViewQuestion = async () => {
try {
const response = await fetch('http://localhost/gotaquestion/api/api.php?action=viewquestion', {
method: 'GET',
credentials: 'include'
});
const data = await response.json();
const result = await data;
setState(data);
} catch (e) {
console.log(e);
}
}
return (
<div>
<ViewQuestion onClick={handleViewQuestion} />
<div id="questions">
<Table rows={state}>
<DeleteButton onClick={deletequestion} />
</Table>
</div>
</div>
);
};
export function ViewQuestion({onClick}) {
return (
<Button onClick={onClick}>View Question</Button>
);
}
export default ViewQuestion;
const Table = ({ rows, setIdTobeDeleted, children }) => (
<table className="ui single line table">
<tbody>
{rows.map((row) => (
<tr key={row.questionid}>
<td>{row.question}</td>
<td>{row.timestamp}</td>
<td>{row.catagories}</td>
<td>{row.answer === null ? "Not Answered" : row.answer}</td>
<td>
{React.cloneElement(children, { questionid: row.questionid })}
</td>
<td>
//I want the EditButton to render there instead on DeleteButton
{React.cloneElement(children, { questionid: row.questionid })}
</td>
<td>{row.questionid}</td>
</tr>
))}
</tbody>
</table>
);
const EditButton = ({ questionid, onClick }) => (
<button
className="ui negative basic button"
onClick={() => onClick(editanswer)}
>Edit Question</button>
);
const DeleteButton = ({ questionid, onClick }) => (
<button
className="ui negative basic button"
onClick={() => onClick(questionid)}
>Delete Question</button>
);
I think in your view you have missed the edit button.
Please consider changing
return (
<div>
<ViewQuestion onClick={handleViewQuestion} />
<div id="questions">
<Table rows={state}>
<DeleteButton onClick={deletequestion} />
</Table>
</div>
</div>
);
to
return (
<div>
<ViewQuestion onClick={handleViewQuestion} />
<div id="questions">
<Table rows={state}>
<DeleteButton onClick={deletequestion} />
</Table>
<Table rows={state}>
<EditButton onClick={editanswer} />
</Table>
</div>
</div>
);
I am trying to redirect to another page after fetch GET call from Modal from in react using history.props and I redirected but I don't know what should write there to show my actual data. I editied somehting i added something in history.props and componentDidMount in Report Here is my code:
import React, { Component } from "react";
import Datee from "./Date";
import { withRouter } from "react-router";
export class CarReports extends Component {
constructor(props) {
super(props);
this.state = {
selectOptions: [],
movie: [],
mov: "",
query: "",
results: []
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
async handleSubmit(e) {
let authToken = localStorage.getItem("Token");
try {
const from = e.target.elements.from.value;
const to = e.target.elements.to.value;
const selections = [...e.target.elements.selectOptions.options].filter(
opt => opt.selected
);
const selectedValues = selections.map(opt => opt.value);
const selectedString = selectedValues.join(",");
e.preventDefault();
const res = await fetch(
`http://localhost:8000/api/1/deliveries/report/?date__lte=${to}&date__gte=${from}&user=${selectedString}`,
{
method: "GET",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: "Bearer " + JSON.parse(authToken)
}
}
);
const movie = await res.json();
console.log(movie);
this.setState({
movie
});
this.props.history.push({
pathname: "/carreport",
state: movie
});
} catch (e) {
console.log(e);
}
}
handleChange = e => {
let target = e.target;
let name = target.name;
//here
let value = Array.from(target.selectedOptions, option => option.value);
this.setState({
[name]: value
});
};
render() {
return (
<div id="car" class="modal">
<a
href="# "
rel="modal:close"
className="float-right text-white h4"
style={{
background: "#b71c1c",
borderRadius: "50%",
padding: "10px",
height: "32px",
lineHeight: "10px"
}}
>
×
</a>
<p className="mod" style={{ marginTop: "40px" }}>
CARS REPORT
</p>
<form style={{ marginTop: "20px" }} onSubmit={this.handleSubmit}>
<div>
<Datee />
</div>
<div className="form-group" style={{ marginTop: "20px" }}>
<label style={{ opacity: "0.6", fontSize: "10px" }}>
CHOOSE A CAR
</label>
<select
name="selectOptions"
style={{ width: "390px" }}
multiple={true}
onChange={this.handleChange}
value={this.state.selectOptions}
class="form-control"
>
<option value="1">Choose Car From List</option>
<option value="1">General Score</option>
<option value="2">Dynamic</option>
<option value="3">Speed</option>
<option value="4">Fuel Save</option>
</select>
</div>
<div style={{ marginTop: "50px" }}>
<center>
<button
type="submit"
value="Get Data"
className="btn btn-login text-white font-weight-bolder boxx "
style={{
height: "40px",
fontSize: "13px",
lineHeight: "30px",
width: "200px",
background: "rgba(183, 28, 28, 1)",
border: "none",
color: "white",
margin: "auto"
}}
>
RAPORT
</button>
</center>
</div>
</form>
</div>
);
}
}
export default withRouter(CarReports);
Here is my careport.js page where I want to display data. I don't know what to do here.
import React, { Component } from "react";
import ReactToExcel from "react-html-table-to-excel";
import CarReports from "../CarReports";
class Report extends Component {
componentDidMount() {
const movie = this.props.location.state.movie;
this.setState({
movie
});
console.log(movie)
}
render() {
return (
<div className="container" style={{ marginTop: "50px" }}>
<CarReports />
<div className="headerr" style={{ marginTop: "25px" }}>
<h6>CAR REPORT</h6>
<p className="p">From 12-17-2019 To 12-12-2019</p>
<div className="driver report">
<table className="table" id="table-to-xls">
<thead>
<tr>
<th>No</th>
<th>Full Name</th>
<th>Car Quantity</th>
<th>Mileage[Km]</th>
<th>Fuel Consumed[L]</th>
<th className="t">
Average Fuel<br></br> Consumed[L/100km]
</th>
<th className="t">Overspeed Distance[%]</th>
<th className="t">
Critical <br></br>Overspeed [qty.]
</th>
<th>Score: Overall</th>
</tr>
</thead>
<tfoot>
<tr className="thead">
<th></th>
<th>Summary</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
<div style={{ marginTop: "40px" }}>
<center>
<a className="btn" href="#car" rel="modal:open" id="bttt">
NEW REPORT
</a>
<ReactToExcel
className="btn btn-success btn-lg bb"
table="table-to-xls"
filename="SoftbikeReport"
sheet="sheet 1"
buttonText="EXPORT CSV"
/>
</center>
</div>
</div>
</div>
</div>
);
}
}
export default Report;
You can pass state when redirecting using react-router's state API like so:
/** INSIDE CarReports.jsx */
export class CarReports extends Component {
...
async handleSubmit() {
...
const res = await fetch(...);
...
const movie = await res.json();
this.setState({ movie });
this.props.history.push({
pathname: "/carreport",
state: movie
});
}
...
}
You can then access the fetch results inside CarReport.jsx like so:
export class CarReport extends Component {
componentDidMount() {
const movie = this.props.location.state.movie;
}
...
}
here are some more resources:
How do i pass state through React_router?
https://tylermcginnis.com/react-router-pass-props-to-link/
I'm somehow causing an infinite render loop when calling the appendModule function. I think it's being caused by the rows.js component as I recently split 4 rows out into seperate components and then imported them into one master rows.js and thats when the problem started. (note: I understand things aren't very tidy/optimal right now).
main.js
In this component I push module components into an array onclick
import React, { Component } from "react";
import Mod0 from "./modules/mod0";
import Mod1 from "./modules/mod1";
import Mod2 from "./modules/mod2";
class Main extends Component {
constructor() {
super();
this.state = {
moduleArray: this.moduleArray
};
this.moduleArray = [];
}
appendModule = x => e => {
switch (x) {
case 0:
this.moduleArray.push(
<div
key={this.moduleArray.length}
id={this.moduleArray.length}
style={{ fontSize: 0, lineHeight: 0 }}
>
<Mod0 />
</div>
);
break;
case 1:
this.moduleArray.push(
<div
key={this.moduleArray.length}
id={this.moduleArray.length}
style={{ fontSize: 0, lineHeight: 0 }}
>
<Mod1 />
</div>
);
break;
case 2:
this.moduleArray.push(
<div
key={this.moduleArray.length}
id={this.moduleArray.length}
style={{ fontSize: 0, lineHeight: 0 }}
>
<Mod2 />
</div>
);
break;
default:
}
this.setState({
moduleArray: this.moduleArray
});
};
console = () => {
return (
<div
id="console-root"
style={{ display: this.state.consoleState ? "block" : "none" }}
>
<div id="console">
<input
onClick={this.appendModule(0)}
value="Single col"
type="submit"
/>
<input
onClick={this.appendModule(1)}
value="Double col"
type="submit"
/>
<input
onClick={this.appendModule(2)}
value="Triple col"
type="submit"
/>
</div>
</div>
);
};
render() {
return (
<>
{this.console()}
<div id="email-root">
<div id="mods">{this.moduleArray}</div>
</div>
</>
);
}
}
export default Main;
mod0.js The below component is an example of the modules that contain the rows component.
import React from "react";
import Rows from "./../rows/rows";
class Mod1 extends React.Component {
render() {
return (
<table
id="Table1"
cellSpacing={0}
cellPadding={0}
border={0}
width="100%"
>
<tbody>
<tr>
<td
valign="top"
align="center"
style={{ borderCollapse: "collapse", borderWidth: 0 }}
bgcolor="#D9E1E2"
>
<table
className="Table2"
bgcolor="#FFFFFF"
cellSpacing={0}
cellPadding={0}
border={0}
width={680}
>
<tbody>
<tr>
<td
style={{ paddingTop: 24, paddingBottom: 24 }}
align="center"
>
<table
className="Table3"
align="center"
cellSpacing={0}
cellPadding={0}
border={0}
width={604}
>
<tbody>
<Rows />
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
);
}
}
export default Mod1;
rows.js The new <Rows /> component that I think is causing the problem. The rows are in an array like that so that I can add and remove them later. The problem persists if that are directly included.
import React from "react";
import Row0 from "./rows";
import Row1 from "./rows";
import Row2 from "./rows";
import Row3 from "./rows";
class Rows extends React.Component {
constructor() {
super();
this.state = {
rowArray: this.rowArray
};
this.rowArray = [
<Row0 key="0" />,
<Row1 key="1" />,
<Row2 key="2" />,
<Row3 key="3" />
];
console.log(this.rowArray);
}
render() {
return <>{this.rowArray}</>;
}
}
export default Rows;
row1.js An example of one of the individual row components imported into rows.js
import React from "react";
class Row1 extends React.Component {
render() {
return (
<tr>
<td
className="mobile-pad"
style={{
color: "#4a4a4a",
fontFamily: '"Campton", Helvetica, Arial, sans-serif',
fontSize: "26px",
lineHeight: "36px",
textAlign: "left",
paddingTop: 0,
paddingBottom: "18px"
}}
>
This is header copy
</td>
</tr>
);
}
}
export default Row1;
I believe your issue could be that instead of passing the function to onClick, you're calling the function. Try this instead:
onClick={() => { this.appendModule(0) }}
and let me know how it went
NOTE:
this uses arrow functions, introduced in ES6. You can also do
onClick={ this.appendModule.bind(this, 0) } if the former way doesn't work.