Develop Reference

display button upon typing input react

I want to be able to type into my input fields, and then have a button show up beside it upon typing that says submit edit. right now, I have a button that always is there, but I want it to only show up upon typing. this is all in react btw. so far, I have tried jquery, but react doesn't like it.
here's the whole page, to avoid any confusion of what I am doing and where my stuff is located.
import React, { Component } from "react";
import axios from "axios";
import "../styles/TourPage.css";
class TourPage extends Component {
constructor(props) {
super(props);
this.state = {
myData: [],
isLoading: true,
};
}
componentDidMount() {
axios
.get("/getResults")
.then((res) => {
this.setState({
myData: res.data
});
})
.catch((error) => {
// Handle the errors here
console.log(error);
})
.finally(() => {
this.setState({
isLoading: false
});
});
}
deleteById = (id) => {
console.log(id)
axios
.post(`/deleteDoc`, {id: id} )
.then(() => {
console.log(id, " worked")
window.location = "/tour"
})
.catch((error) => {
// Handle the errors here
console.log(error);
})
}
editById = (id, siteLocation, Services, cnum) => {
console.log(id, siteLocation, Services, cnum)
axios
.post(`/editDoc`, JSON.stringify({id: id, location: siteLocation, Services: Services, cnum: cnum}),{
headers: {
"Content-Type": "Application/json"
}
} )
.then(() => {
console.log(id, " worked")
window.location = "/tour"
})
.catch((error) => {
// Handle the errors here
console.log(error);
})
}
render() {
// You can handle the loader part here with isLoading flag. In this case No data found will be shown initially and then the actual data
let { myData, isLoading } = this.state;
return (
<table id="customers">
<tr>
<th>siteLocation</th>
<th>Services</th>
<th>cnum</th>
</tr>
{myData.length > 0
? myData.map(({ location, Services, cnum, _id }, index) => (
<tr key={index}>
<td><input type="text" placeholder={location} name="location" id="location" /> </td>
<td><input type="text" placeholder={Services} name="Services" id="Services" /> </td>
<td><input type="text" placeholder={cnum} name="cnumhide" id="cnumhide" /> </td>
<td><input type="hidden" placeholder={cnum} name="cnum" id="cnum" /> </td>
<button
onClick={(e) => {
e.preventDefault();
this.deleteById(_id);
}}
disabled={isLoading}
>
Delete
</button>
<button
onClick={(e) => {
e.preventDefault();
var siteLocation = document.getElementById('location').value
var Services = document.getElementById('Services').value
var cnum = document.getElementById('cnum').value
this.editById(_id, siteLocation, Services, cnum)
}}
>
Submit Edit
</button>
</tr>
))
: "No Data Found"}
</table>
);
}
}
const script = document. createElement("script"); $('input').keyup(function(){
if($.trim(this.value).length > 0)
$('#location').show()
else
$('#location').hide()
});
export default TourPage;
thanks 4 the help in advance.

You can use onfocus() in the text element. If you want to hide the button, use onfocusout() or in case if you want to track only after input has changed, use onchange() event
...
//class function
onTyping =()=>{
this.setState({
showSubmit:true
})
}
...
//render part
render(){
...
//input which you want to track typing
<input type="text" onfocus={()=>this.onTyping()} placeholder={location} name="location" id="location" />
...
//element submit button
{this.state.showSubmit && <button
onClick={(e) => {
e.preventDefault();
var siteLocation = document.getElementById('location').value
var Services = document.getElementById('Services').value
var cnum = document.getElementById('cnum').value
this.editById(_id, siteLocation, Services, cnum)
}}
>
Submit Edit
</button>}
...

Here is an example that helps you,
const {
useState
} = React;
const Test = () => {
const [show, setShow] = useState(false);
const handleChange = (event) => {
if (event.target.value.length > 0)
setShow(true);
else
setShow(false)
}
return ( <div>
<input type = "text"
onChange = {
(event) => handleChange(event)
}/>
{show && < button > Submit changes now! </button>}
</div>
)
}
ReactDOM.render( < Test / > ,
document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

There is a way to avoid jquery and continue using your react class component to achieve this.
Map over state.myData to render each item with an input and a button.
Use the array index with the input's onChange event callback to add the inputValue into the correct array item's object within state.
Use the array index with the button's onClick event callback to get the item from state.myData before sending it to the server.
If there is an inputValue for the item, you can conditionally render the button.
import React, { Component } from "react";
import axios from "axios";
class TourPage extends Component {
constructor(props) {
super(props);
this.state = {
myData: [],
isLoading: true
};
}
componentDidMount() {
axios
.get("https://rickandmortyapi.com/api/character")
.then((res) => {
this.setState({
myData: res.data.results
});
})
.finally(() => {
this.setState({
isLoading: false
});
});
}
handleChangeInput = ({ target }, index) => {
const newData = [...this.state.myData];
newData[index].inputValue = target.value;
this.setState({
myData: newData
});
};
handleSubmitEdit = (index) => {
const item = this.state.myData[index];
// submit the edit to the api
console.log(
`Clicked on 'submit edit' for ${item.name} with value ${item.inputValue}`
);
};
render() {
let { myData, isLoading } = this.state;
if (isLoading) {
return "loading...";
}
return (
<div>
{myData.map(({ name, status, species, inputValue }, index) => {
return (
<div key={index}>
<p>{`${name} - ${species} - ${status}`}</p>
<input
type="text"
onChange={(e) => this.handleChangeInput(e, index)}
value={inputValue || ""}
/>
{inputValue && (
<button onClick={() => this.handleSubmitEdit(index)}>
Submit Edit
</button>
)}
</div>
);
})}
</div>
);
}
}
export default TourPage;
If you wanted to have an input per field within each row, you could make some small changes and save your edits to the item's state within a nested object.
Then you could check if there was anything inside that row's edits object to conditionally show the submit button per row.
import React, { Component } from "react";
import axios from "axios";
import isEmpty from "lodash.isempty";
import pick from "lodash.pick";
class TourPage extends Component {
constructor(props) {
super(props);
this.state = {
myData: [],
isLoading: true
};
}
componentDidMount() {
axios
.get("https://rickandmortyapi.com/api/character")
.then((res) => {
this.setState({
// here we create an empty 'edits' object for each row
myData: res.data.results.map((d) => ({
...pick(d, ["name", "status", "species"]),
edits: {}
}))
});
})
.finally(() => {
this.setState({
isLoading: false
});
});
}
handleChangeInput = ({ target }, index) => {
const newData = [...this.state.myData];
const { value, name } = target;
newData[index].edits[name] = value;
this.setState({
myData: newData
});
};
handleSubmitEdit = (index) => {
const item = this.state.myData[index];
// submit the edit to the api
console.log(`Clicked on 'submit edit' for ${item.name} with edits:`);
console.log(item.edits);
console.log("Updated item: ");
const { edits, ...orig } = item;
const newItem = { ...orig, ...edits };
console.log(newItem);
// Once saved to api, we can update myData with newItem
// and reset edits
const newData = [...this.state.myData];
newData[index] = { ...newItem, edits: {} };
this.setState({
myData: newData
});
};
showButton = (index) => {
const { edits } = this.state.myData[index];
return !isEmpty(edits);
};
render() {
let { myData, isLoading } = this.state;
if (isLoading) {
return "loading...";
}
return (
<table>
<tbody>
{myData.map((row, index) => {
const { edits, ...restRow } = row;
return (
<tr key={index}>
{Object.keys(restRow).map((col) => {
return (
<td>
<label>
{col}:
<input
name={col}
value={edits[col] || restRow[col]}
onChange={(e) => this.handleChangeInput(e, index)}
/>
</label>
</td>
);
})}
<td>
{this.showButton(index) && (
<button onClick={() => this.handleSubmitEdit(index)}>
Submit Edit
</button>
)}
</td>
</tr>
);
})}
</tbody>
</table>
);
}
}
export default TourPage;

React send child object into parent array and submit form

Newbie issues: Building a shopping cart, I have a form in a modal.
The submit button is that of the modal (outside the form tags), but seems to be sending the form to the handleOnSubmit handler. However, apart from closing the modal, I am unable to update the productBought and productName state values.
Ideally, I would like to push the basket[] content (from InputList class) unto a new array in the parent (AsyncAwaitLocalhost), after which I can submit the entire purchase to an API.
refs are deprecated and various other flavors of sharing data are failing me.
My challenges are:
(i) How can I share the push the basket object to a waiting parent state object?
and
(ii) How can I submit the form after console logging the form objects?
Thanks.
AsyncAwaitLocalhost.jsx
import React from 'react'
import "./App.css"
import { Modal, Button } from "react-bootstrap"
import Form from "./Form.jsx"
class AsyncAwaitLocalhost extends React.Component {
constructor(props) {
super(props);
this.state = {
sharedVar: "init",
jsonContent: [],
isOpen: null,
productBought: 0,
productName: "anItem"
}
this.handleOnSubmit = this.handleOnSubmit.bind(this)
}
updateShared(shared_value) {
this.setState({ sharedVar: shared_value });
}
async componentDidMount() {
// GET request using fetch with async/await
const response = await fetch('http://localhost:8080/cakes');
const data = await response.json();
this.setState({ jsonContent: data.cakes, greeting: this.state.greeting, newGreeting: this.state.newGreeting })
}
openModal = (index) => () => this.setState({ isOpen: index });
closeModal = () => this.setState({ isOpen: null });
handleCloseModal() {
this.setState({ isOpen: null });
}
handleOnSubmit(event) {
event.preventDefault()
this.setState({ productBought: event.target.name.value })
this.setState({ productName: event.target.name.value })
console.log("Inside handleOnSubmit: " + this.state.productBought)
this.handleCloseModal();
}
render() {
const { jsonContent } = this.state;
const { sharedVar } = this.state;
const { productBought } = this.state;
const { productName } = this.state;
console.log("shared var in parent: " + sharedVar)
console.log("productBought in parent: " + productBought)
const Cake = ({ name, id, text, image, comment, price, dbutton, dmodal }) => (
<div className="rounded-well">
<div>
<img src={image} width="120px" alt={name} />
</div>
<div>
<p>{name}</p>
<p>{text}</p>
<p>{comment}</p>
<p>{id}</p>
<p>{price}</p>
<div> {this.state.sharedVar}</div>
<div>{dbutton}</div>
<div id="dModal" className="dModalClosed">{dmodal}</div>
</div>
</div>
);
return (
<div className="card text-center m-3">
Showing HTTP Requests, CSS , Data Transfer & Modals
<h5 className="card-header">See Cakes</h5>
<div className="card-body">
<div>
{this.state.jsonContent.map((cake, index) => (
<Cake
image={cake.image}
text={cake.text}
key={index}
price={"£" + cake.price + ".00"}
dbutton={<Button onClick={this.openModal(index)}>See more</Button>}
dmodal={
<Modal id={cake.name} show={this.state.isOpen === index}
onHide={this.closeModal} className="image-container">
<Modal.Header closeButton>
<Modal.Title>{cake.text}</Modal.Title>
</Modal.Header>
<Modal.Body>
<div>
<img src={cake.image} width="300px" alt={cake.name} />
</div>
<br />
<p>{cake.text}</p>
<p>{cake.comment}</p>
<div>
<form id={cake.name} method="POST" action="#" onSubmit={this.handleOnSubmit} >
{<Form dataFromParent={this.state.jsonContent[index]} onChange />}
</form>
</div>
</Modal.Body>
<Modal.Footer>
<Button variant="primary" onClick={this.closeModal}>
Cancel
</Button>
<Button form={cake.name} type="submit" variant="secondary" onClick={this.handleOnSubmit}>
Add to basket
</Button>
</Modal.Footer>
</Modal>
}
/>
))}
<div>
</div>
</div>
</div>
</div>
);
}
}
export { AsyncAwaitLocalhost };
Form.jsx
import React from 'react';
class InputList extends React.Component {
constructor(props) {
super(props)
this.state = {
bought: 0,
sharedVar: "input field",
cakeItems:{},
basket: [],
input: 0,
item: ""
}
}
handleChange(index, e) {
const value = e.target.value
this.props.onChange(index, {...this.props.data[index], buy: value})
this.state.bought = value
this.state.cakeItems = {item: this.props.data[0].name, number: this.state.bought}
this.state.basket.push(this.state.cakeItems)
}
render() {
const { bought } = this.state;
const {cakeItems} = this.state;
const {basket} = this.state;
const { sharedVar } = this.state;
const { item } = this.state;
// this.state.sharedVar = this.props.dataFromParent[0].name
console.log("pre-bought: " + bought);
console.log("Shared var in input class: " + sharedVar);
console.log("basket in InputClass: " + JSON.stringify(basket))
return (
<div>
Buy:
{this.props.data.map((d, i) => <input key="0" value={d.buy} name="productBought" onChange={this.handleChange.bind(this, i)} />)}
{this.props.data.map((d, i) => <input key="1" type="hidden" value={d.name} name="productName" />)}
<>
To buy: {bought}
</>
</div>
)
}
}
class Form extends React.Component {
constructor(props) {
super(props)
this.state = {
data: [],
basket: [],
sharedVar: "form field",
usrBasket: {
buy: 1,
id: "randomStr",
items: [{buy: 1, item: ""}],
value_key: "",
nuArry: []
},
input: {}
}
}
loadStuff() {
this.setState({
data: [this.props.dataFromParent]
})
// console.log('got some stuff from the server in Form: ' + JSON.stringify(this.props.dataFromParent))
}
handleChange(index, value) {
console.log('data changed!', value)
const data = [...this.state.data]
data.splice(index, 1, value)
this.setState({
data,
})
this.state.basket = this.state.cakeItems
console.log("basket in FormClass: " + JSON.stringify(this.state.basket))
}
componentDidMount() {
this.loadStuff()
}
render() {
const {basket} = this.state;
const { value_key } = this.state;
this.state.value_key = "new vk";
console.log("value_key in Form: " + value_key);
const { sharedVar } = this.state;
this.state.sharedVar = "Hello greeting";
console.log("sharedVar in Form: " + sharedVar);
return (
<div>
<InputList data={this.state.data} onChange={this.handleChange.bind(this)} />
</div>
);
}
}
export default Form```
<br>

Haa, the newbie life...!
So after more study and getting to learn the entire framework better the solution is thus.
(i) How can I share the push the basket object to a waiting parent state object?
Create classes - (some people argue for functional components) that are distinct and do the one thing well. The Form component renders the modal, collects the form values and submits those values to the parent through props.
In Parent, make ready to receive child props
<Cakes onSubmitChild={this.getFormValues} />
Then send the values to the parent component from Child like this:
this.props.onSubmitChild(this.state.productField)
(ii) How can I submit the form after console logging the form objects?
The Parent has the submit to server button. After the Child has submitted the form values to the Parent, it is left to create a JSON object and submit it to the server using AJAX (or whatever the coder prefers).
Note that there will be CORS issues to iron out on the server side to resolve this, but I recommend the cors library in npm.

How can I make only one list item expand when a button is clicked in React (no hooks)?

I have a list of students and I want to make an expandable list view. Basically each student will have a plus & minus button and every time it's clicked a list of all student's grades will expand. However, so far when I click on one of the buttons it opens all the students' grade lists at the same time.
I can't seem to figure out how I can fix this so that when I click on a specific student it will open only that student's grades. Can anyone help me on this? I think I'm close, but I can't get there!
Here's my code:
import React from 'react';
import Average from './Average';
import './App.css';
class App extends React.Component{
state = {
students: [],
error: null,
search: null,
open: false,
}
componentDidMount(){
fetch('https://api.hatchways.io/assessment/students')
.then(res => res.json())
.then(
(data) => {
this.setState({
students: data.students,
})
},
(error) => {
this.setState({ error });
})
}
handleChange = (e) => {
this.setState({ search: e.target.value });
}
togglePanel = e => {
this.setState({ open: !this.state.open })
}
render(){
let { search, students, open } = this.state;
const display = students.filter((student) => {
if(search == null)
return student;
else if(student.firstName.toLowerCase().includes(search.toLowerCase()) ||
student.lastName.toLowerCase().includes(search.toLowerCase())){
return student;
}
}).map((student, idx) => {
return (
<div className = "student-container" key = {student.id}>
<img className = "student-pic" src = {student.pic} alt = "pictures"/>
<div className = "student-mini">
<h1>{student.firstName.toUpperCase()} {student.lastName.toUpperCase()}</h1>
<p>Email: {student.email}</p>
<p>Company: {student.company}</p>
<p>Skill: {student.skill}</p>
<Average grades = {student.grades}/>
<button onClick = {(e) => this.togglePanel(e)}>{open ? '-' : '+'}</button>
<div>
<p>{open ? student.grades.map((grade, id) => {
return (
<p key = {id}>Test {id + 1}: {grade}%</p>
)
}): null}
</p>
</div>
</div>
</div>
)
})
return (
<div className = "gray-container">
<div className = "white-container">
<form>
<input onChange = {this.handleChange} type = "text" placeholder = "Search by
name">
</input>
</form>
<div>
{display}
</div>
</div>
</div>
)
}
}
export default App;

Each of your expandable panels uses the same single open state to determine whether it should be expanded or not, that is why they all open at once. The easiest solution here is for each panel to have its own state.
Ideally, you want to extract the JSX from your map's return statement to separate component presenting a single student's panel, let's say StudentPanel, pass the student object as prop and move the open state and the toggle function to that component as well.
UPDATE: You'd have something like this:
class StudentPanel extends React.Component {
state = {
open: false
}
togglePanel = e => {
this.setState(prevState => ({ open: !prevState.open }))
}
render() {
const { student } = this.props;
return (
<div className = "student-container" key = {student.id}>
// (...) rest of JSX
</div>
);
}
}
In render of your App you'd have:
(...).map(student => <StudentPanel student={student} />)
and the open property and togglePanel can be removed from App component completely.

ReactJS TypeError: _this3.onDismissID is not a function

I'm pulling top news related to a particular search term from a website, displaying them and then adding a dismiss button beside each news so that user can delete them if they want. The code goes something like this:
import React, { Component } from "react";
const PATH_BASE = "https://hn.algolia.com/api/v1";
const PATH_SEARCH = "/search";
const PARAM_SEARCH = "query=";
const DEFAULT_QUERY = "redux";
const url = `${PATH_BASE}${PATH_SEARCH}?${PARAM_SEARCH}${DEFAULT_QUERY}`;
console.log(url);
class App extends Component {
constructor(props) {
super(props);
this.state = {
results: null,
searchTerm: DEFAULT_QUERY
};
this.setTopSearchStories = this.setTopSearchStories.bind(this);
this.onDismissID = this.onDismissID.bind(this);
}
setTopSearchStories(results) {
this.setState({ results });
}
onDismissID(id) {
const updatedHits = this.state.results.hits.filter(
(item) => item.objectID !== id
);
this.setState({
result: { ...this.state.results, hits: updatedHits }
});
}
componentDidMount() {
const { searchTerm } = this.state;
fetch(`${PATH_BASE}${PATH_SEARCH}?${PARAM_SEARCH}${searchTerm}`)
.then((response) => response.json())
.then((results) => this.setTopSearchStories(results))
.catch((error) => error);
}
render() {
const { results, searchTerm } = this.state;
if (!results) return null;
const lists = results.hits;
return (
<div className="page">
<Table list={lists} />
</div>
);
}
}
class Table extends Component {
render() {
const { list } = this.props;
return (
<div>
{list.map((item) => (
<div key={item.objectID} className="table">
<span>
<a href={item.url}>{item.title}</a>
</span>
<span>{item.author}</span>
<span>
<button
onClick={() => this.onDismissID(item.objectID)}
type="button"
>
Dismiss
</button>
</span>
</div>
))}
</div>
);
}
}
export default App;
It renders fine, but when I click the Dismiss button the code breaks with the error message "_this3.onDismissID is not a function" . Why is this happening?

Issue
onDismissID isn't defined in Table, it's defined in App.
Solution
Seems you may want to pass onDismissID as a prop to Table.
In App pass an onDismissID prop to the Table component.
...
render() {
const { results, searchTerm } = this.state;
if (!results) return null;
const lists = results.hits;
return (
<div className="page">
<Table list={lists} onDismissID={this.onDismissID} /> // pass this.onDismissID
</div>
);
}
In Table, destructure onDismissID from props and attach to button click handler.
class Table extends Component {
render() {
const { list, onDismissID } = this.props; // destructure onDismissID
return (
<div>
{list.map((item) => (
<div key={item.objectID} className="table">
<span>
<a href={item.url}>{item.title}</a>
</span>
<span>{item.author}</span>
<span>
<button
onClick={() => onDismissID(item.objectID)} // attach onDismissID
type="button"
>
Dismiss
</button>
</span>
</div>
))}
</div>
);
}
}

How to toggle a button in React list?

I render a React list and there is an Edit button in each list item. I wanted to toggle to switch from the data to the input form and back. Similar to this application in this article: https://medium.com/the-andela-way/handling-user-input-in-react-crud-1396e51a70bf. You can check out the demo at: https://codesandbox.io/s/fragrant-tree-0t13x.
This is where my React Component display the list:
import React, { Component } from "react";
import PriceBox from "../SinglePricebox/index";
// import SecurityForm from "../SecurityForm/index";
import AddPriceForm from "../AddPriceForm/index";
// import { uuid } from "uuidv4";
export default class PriceForm extends Component {
constructor(props) {
super(props);
this.state = {
priceArr: this.props.pricelist,
// newPriceArr: this.props.updatePrice,
showPricePopup: false,
addPricePopup: false,
isToggleOn: true,
date: props.date || "",
number: props.number || ""
};
}
updateInput = ({ target: { name, value } }) =>
this.setState({ [name]: value });
togglePopup = () => {
this.setState(prevState => ({
showPopup: !prevState.showPopup
}));
};
togglePricePopup = () => {
this.setState(prevState => ({
showPricePopup: !prevState.showPricePopup
}));
};
addPricePopup = () => {
this.setState(prevState => ({
addPricePopup: !prevState.addPricePopup
}));
};
/* adds a new price to the list */
addPrice = newPrice => {
this.setState(prevState => ({
addPricePopup: !prevState.addPricePopup,
// spreads out the previous list and adds the new price with a unique id
priceArr: [...prevState.priceArr, { ...newPrice }]
}));
};
// handlePriceSubmission = () => {
// const { updatePrice } = this.props;
// this.addPricePopup();
// updatePrice(priceArr);
// };
toggleItemEditing = (index) => {
this.setState(prevState => ({
priceArr: prevState.priceArr.map(priceItem => {
// isToggleOn: !state.isToggleOn;
})
}));
};
// toggleItemEditing = index => {
// this.setState({
// items: this.state.items.map((item, itemIndex) => {
// if (itemIndex === index) {
// return {
// ...item,
// isEditing: !item.isEditing
// }
// }
// return item;
// })
// });
// };
render() {
// const { updatePrice } = this.props;
return (
<div className="popup">
<div className="popup-inner">
<div className="price-form">
<h2>Prices</h2>
<div className="scroll-box">
{this.state.priceArr.map((props) => (
<PriceBox
{...props}
key={props.date}
// toggleItemEditing={this.toggleItemEditing()}
onChange={this.handleItemUpdate}
/>
))}
</div>
<div className="buttons-box flex-content-between">
<button
type="button"
onClick={this.addPricePopup}
className="btn add-button">Add +</button>
{this.state.addPricePopup && (
<AddPriceForm
addPrice={this.addPrice}
cancelPopup={this.addPricePopup}
/>
)}
<div className="add-btns">
<button
type="button"
onClick={() => this.props.closeUpdatePopup()}
className="btn cancel-button"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>
);
}
}
The list inside the component above is:
<div className="scroll-box">
{this.state.priceArr.map((props) => (
<PriceBox
{...props}
key={props.date}
// toggleItemEditing={this.toggleItemEditing()}
onChange={this.handleItemUpdate}
/>
))}
</div>
And this is the single list item:
import React, { Component } from "react";
export default class SinglePricebox extends Component {
state = {
showPopup: false, //don't show popup
todaydate: this.props.date
};
/* toggle and close popup edit form window */
togglePopup = () => {
this.setState(prevState => ({
showPopup: !prevState.showPopup
}));
};
toggleEditPriceSubmission = getPriceIndex => {
const { toggleItemEditing, date } = this.props;
// toggle the pop up (close)
// this.showPopup();
toggleItemEditing({ ...getPriceIndex, date });
console.log("date?", date);
};
/* handles edit current security form submissions */
// handleEditSecuritySubmission = editSecurity => {
// const { editCurrentSecurity, id } = this.props;
// // toggle the pop up (close)
// this.togglePopup();
// // sends the editSecurity fields (name, isin, country) + id back to
// // App's "this.editCurrentSecurity"
// editCurrentSecurity({ ...editSecurity, id });
// };
render() {
return (
<div className="pricebox">
<article className="pricetable">
{this.toggleEditPriceSubmission
? "editing" : "not editing"}
<table>
<tbody>
<tr>
<td className="date-width">{this.props.date}</td>
<td className="price-width">{this.props.number}</td>
<td className="editing-btn">
<button
type="button"
className="edit-btn"
onClick={this.toggleEditPriceSubmission}
>
{this.toggleEditPriceSubmission ? "Save" : "Edit"}
</button>
</td>
<td>
<button
type="button"
className="delete-btn">
X
</button>
</td>
</tr>
</tbody>
</table>
</article>
</div>
);
}
}
I have been struggling all afternoon to toggle the edit button in each list item. I was attempting to get the key of each list item which is the this.prop.date.
You can see my code in detail at CodeSandBox: https://codesandbox.io/s/github/kikidesignnet/caissa

I would create a component which will handle the list item as a form and update it as if it was SecurityForm.
{this.state.priceArr.map((props) => {
if(props) {
return <PriceListForm methodToUpdate {...props} />
}else {
retun (
<PriceBox
{...props}
key={props.date}
// toggleItemEditing={this.toggleItemEditing()}
onChange={this.handleItemUpdate}
/>
);
}
})}
and make PriceListForm look like PriceBox but use inputs to capture new data. This way you will have two different components with less complicated logic instead of having a huge component with complex validations to check if you will display an input or not.

create a funtion named Edit to update the State
Edit = (id) => {
this.setState({edit: !this.state.edit, id})
}
and instead of that
<td className="country-width">{this.props.country}</td>
do something like
<td className="country-width">{this.state.edit ? <input type="text" value={this.props.country} onChange={() => UPDATE_THE_CONTENT}/> : this.props.isin}</td>
and call the Edit function onclick of Edit Button and pass ID of that td as a param to update it.
NOTE: by default THE VALUE OF EDIT STATE is false/null.
you can use onChange to update that box or some other techniques like create a button along with it and use that to update it.
hope this might help you