How to alert out the value of an option box in React? - javascript

I would like to get the values of the option boxes. Here's the sample code I wrote. I am trying to populate the option boxes from arrays. I can tell you details if needed for the solution. Thank you for your help in advance!
import React from 'react';
class Scooters extends React.Component {
static defaultProps = {
cat_brand: ['Honda', 'Peugeot', 'Yamaha'],
cat_cc: ['50cc', '125cc', '150cc', '250cc', '300cc'],
cat_price: ['20-70 €', '80-120 €', '130-160 €']
}
btnClick() {
alert('Button has been clicked...');
{/* I would like to alert here the selected options of the boxes. */}
}
render() {
let Brand_categoryOptions = this.props.cat_brand.map(categoryBrand => {
return <option key={categoryBrand} value={categoryBrand}>{categoryBrand}</option>
});
let Cc_categoryOptions = this.props.cat_cc.map(categoryCc => {
return <option key={categoryCc} value={categoryCc}>{categoryCc}</option>
});
let Price_categoryOptions = this.props.cat_price.map(categoryPrice => {
return <option key={categoryPrice} value={categoryPrice}>{categoryPrice}</option>
});
return (
<div>
<div className="container-fluid content">
<h2 className="text-center mt-2">Choose from our Scooters</h2>
<br></br>
<form>
<div class="container col-lg-4 mt-5">
<table class="table table-bordered">
<tr><th>Specifications</th> <th>Set the parameters</th></tr>
<tr><td>Scooter Brand</td> <td><select ref="cat_brand">{Brand_categoryOptions}</select></td></tr>
<tr><td>Engine CC</td> <td><select ref="cat_cc">{Cc_categoryOptions}</select></td></tr>
<tr><td>Unit Price</td> <td><select ref="cat_price">{Price_categoryOptions}</select></td></tr>
<tr><th>Action</th> <th><button onClick={this.btnClick}>Search</button></th></tr>
</table>
</div>
</form>
</div>
</div>
);
}
};
export default Scooters;

You need to add event handler function to select element and store the value in state. Also don’t forget to bind your btnClick function in constructor or use arrow function instead
Below code would work
dropDownChange = e => {
this.setState({
value: e.target.value
});
}
btnClick = () => {
alert('Option selected ', this.state.value);
}
<select ref="cat_price" onChange={this.dropDownChange} value={this.state.value}>{Price_categoryOptions}</select>

Try this. I added an onChange handler on the form which takes the change event, and sets the components state respectively (the state is initialized with a value from your default props, so that if you selected nothing and click it has the default values).
It gets the name attribute on the select element and the value from the event target. And on submit you prevent the default behavior which is the submit, so you can do whatever you want with your data.
class Scooters extends React.Component {
static defaultProps = {
cat_brand: ['Honda', 'Peugeot', 'Yamaha'],
cat_cc: ['50cc', '125cc', '150cc', '250cc', '300cc'],
cat_price: ['20-70 €', '80-120 €', '130-160 €']
}
state = {
cat_brand: this.props.cat_brand[0],
cat_cc: this.props.cat_cc[0],
cat_price: this.props.cat_price[0],
}
onChange = (event) => {
const { name, value } = event.target;
this.setState({ [name]: value })
}
btnClick = (event) => {
event.preventDefault();
console.log(this.state);
}
render() {
let Brand_categoryOptions = this.props.cat_brand.map(categoryBrand => (<option key={categoryBrand} value={categoryBrand}>{categoryBrand}</option>));
let Cc_categoryOptions = this.props.cat_cc.map(categoryCc => (<option key={categoryCc} value={categoryCc}>{categoryCc}</option>));
let Price_categoryOptions = this.props.cat_price.map(categoryPrice => (<option key={categoryPrice} value={categoryPrice}>{categoryPrice}</option>));
return (
<div>
<div className="container-fluid content">
<h2 className="text-center mt-2">Choose from our Scooters</h2>
<br></br>
<form onChange={this.onChange}>
<div className="container col-lg-4 mt-5">
<table className="table table-bordered">
<tbody>
<tr>
<th>Specifications</th>
<th>Set the parameters</th>
</tr>
<tr>
<td>Scooter Brand</td>
<td>
<select name="cat_brand" ref="cat_brand">{Brand_categoryOptions}</select>
</td>
</tr>
<tr>
<td>Engine CC</td>
<td>
<select name="cat_cc" ref="cat_cc">{Cc_categoryOptions}</select>
</td>
</tr>
<tr>
<td>Unit Price</td>
<td>
<select name="cat_price" ref="cat_price">{Price_categoryOptions}</select>
</td>
</tr>
<tr>
<th>Action</th>
<th>
<button onClick={this.btnClick}>Search</button>
</th>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
);
}
};

Related

Export checked element as csv file

I'm trying to get only checked items saved in an array So that I'm going to export it as a CSV file. need help, that's my sandbox below;
https://codesandbox.io/s/laughing-bush-5fvl7b?file=/src/App.js
You can save the selected items id in state. Have a look:
import { useState } from "react";
import { CategoriesData } from "../data";
import "./styles.css";
export default function App() {
const [selectedIds, setSelectedIds] = useState([]);
return (
<div className="App">
<table id="categories">
<thead>
<tr id="titres">
<td className="input-check">
<input type="checkbox" className="checkbox" />
</td>
<td>CATEGORIES</td>
<td>DESCRIPTION</td>
</tr>
</thead>
<tbody>
{CategoriesData.map((category, index) => (
<tr
id={`element-${index}`}
key={category._id}
className={
selectedIds.includes(category.id) ? "product active" : "product"
}
>
<td className="input-check">
<input
type="checkbox"
className="checkbox"
onClick={(e) => {
var selected = e.target.checked;
if (selected) {
setSelectedIds([...selectedIds, category.id]);
} else {
setSelectedIds([
...selectedIds.filter((x) => x !== category.id)
]);
}
}}
/>
</td>
<td>{category.designation}</td>
<td id="category-desc">{category.description}</td>
</tr>
))}
</tbody>
</table>
</div>

How to get all checkbox IDs that are checked using Javascript?

I'm working on a project named "Food Recipes", where a user can create, edit, delete his own recipes.
When creating a new recipe, the user must select the ingrediets.
So here is where I need your help:
By an axios call, I'm getting all the ingredients and show them into a table. The table looks like this:
|---------------------|------------------|-----------------|
| Ingredient | Check | Amount |
|---------------------|------------------|-----------------|
| Tomato | true | 2 kg |
|---------------------|------------------|-----------------|
| Potato | false | |
|---------------------|------------------|-----------------|
| Onion | true | 1 kg |
|---------------------|------------------|-----------------|
After checking some ingredient to TRUE, I want to have onChange function that will create list of IDs, from all ingredients that are CHECKED (in this case, I will have list with two elements: ID from Tomato, and ID from Onion)
To mention, i put ingredient ID as a value inside the <input type="checkbox"/>
Here is my code:
import React, {Component, useEffect, useState} from 'react'
import axios from "../../../axios/axios"
class Ingredient extends Component {
constructor(props){
super(props)
this.state = {
ingredients: [],
ingedientsList: [],
isChecked: false,
}
}
onIngredientChange = (e) => {
//HERE
};
componentDidMount() {
axios.get("/ingredients").then((data) => {
const ingredients = Object.keys(data.data).map((ingredient, index) => {
return (
<tr key={index}>
<td scope="col">
<label>{data.data[index].name}</label>
</td>
<td scope="col">
<input
id={data.data[index].id}
key={index}
type="checkbox"
name={"newIngredients"}
value={data.data[index].id}
onChange={this.onIngredientChange}
/>
</td>
<td scope="col">
<input
id={data.data[index].id + "amount"}
key={index}
type="number"
min="0"
max="500"
name="amount"
placeholder="grams"
onChange={this.onIngredientChange}
/>
</td>
</tr>
);
});
this.setState({ingredients: ingredients});
});
}
render() {
return (
<div className="form-group">
<table className="table tr-history table-striped small">
<thead>
<tr>
<th scope="col">
<h5>Ingredient</h5>
</th>
<th scope="col">
<h5>Check</h5>
</th>
<th scope="col">
<h5>Amount</h5>
</th>
</tr>
</thead>
<tbody>
{this.state.ingredients}
</tbody>
</table>
</div>
)
}
}
export default Ingredient;
Update
Try the code below.
const data = {
data:[
{
id:1,
name:"A"
},
{
id:2,
name:"B"
},
{
id:3,
name:"C"
}
]
}
class Ingredient extends React.Component {
constructor(props){
super(props)
this.state = {
ingredients: [],
ingedientsList: [],
checkedList:[],
isChecked: false,
}
}
componentDidMount() {
const ingredients = data.data.map((ingredient, index) => {
return (
<tr key={index}>
<td scope="col">
<label>{data.data[index].name}</label>
</td>
<td scope="col">
<input
id={data.data[index].id}
key={index}
type="checkbox"
name={"newIngredients"}
value={data.data[index].id}
onChange={(e)=>this.onIngredientChange(e,data.data[index].id)}
/>
</td>
<td scope="col">
<input
id={data.data[index].id + "amount"}
key={index}
type="number"
min="0"
max="500"
name="amount"
placeholder="grams"
onChange={this.onIngredientChange}
/>
</td>
</tr>
);
});
this.setState({ingredients: ingredients});
}
onIngredientChange = (e,id) => {
let resultArray = []
if(e.target.checked) //if checked (true), then add this id into checkedList
{
resultArray = this.state.checkedList.filter(CheckedId=>
CheckedId !== id
)
resultArray.push(id)
}
else //if not checked (false), then remove this id from checkedList
{
resultArray = this.state.checkedList.filter(CheckedId=>
CheckedId !== id
)
}
console.log(resultArray)
this.setState({
checkedList:resultArray
})
}
render() {
return (
<div className="form-group">
<table className="table tr-history table-striped small">
<thead>
<tr>
<th scope="col">
<h5>Ingredient</h5>
</th>
<th scope="col">
<h5>Check</h5>
</th>
<th scope="col">
<h5>Amount</h5>
</th>
</tr>
</thead>
<tbody>
{this.state.ingredients}
</tbody>
</table>
</div>
)
}
}
// Render it
ReactDOM.render(
<Ingredient />,
document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>
First, have a checked list in state
this.state = {
ingredients: [],
ingedientsList: [],
checkedList:[]
isChecked: false,
}
Then change element a little bit,
<input
id={data.data[index].id}
key={index}
type="checkbox"
name={"newIngredients"}
value={data.data[index].id}
onChange={(e)=>this.onIngredientChange(e,data.data[index].id)}
/>
Then change handler,
onIngredientChange = (e,id) => {
let resultArray = []
if(e.target.checked) //if checked (true), then add this id into checkedList
{
resultArray = this.state.checkedList.filter(CheckedId=>
CheckedId !== id // filter(checkID=>{CheckedId !== id}) remove {}
)
resultArray.push(id)
}
else //if not checked (false), then remove this id from checkedList
{
resultArray = this.state.checkedList.filter(CheckedId=>
CheckedId !== id // filter(checkID=>{CheckedId !== id}) remove {}
)
}
this.setState({
checkedList:resultArray
})
console.log(resultArray) // get all checked ID
};
Try this. Use a state array instead of simple array.
onIngredientChange = (e, value) => {
if (array.includes(value) && !e.target.checked) {
array.splice( array.indexOf(value), 1 );
} else if (!array.includes(value) && e.target.checked) {
array.push(value)
}
};
<input id={data.data[index].id} key={index}
type="checkbox" name={"newIngredients"}
value={data.data[index].id}
onChange={(e) =>this.onIngredientChange(e, value)} />
...
onIngredientChange = e => {
const checkedIngrediants = {
...this.state.checkedIngrediants
[e.target.id]: !e.target.value
};
this.setState({
checkedIngredients,
ingredientsList: Object.keys(checkedIngredients)
.filter(key => checkedIngredients[key])
})
}
...
<input
id={data.data[index].id}
key={index}
type="checkbox"
name={"newIngredients"}
value={this.state.checkedIngrediants[data.data[index].id]}
onChange={this.onIngredientChange} />

React: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

I am receiving this error "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.". This is happening after my 3rd-4th drop down selection.
The first few times I select a drop down, the table is rendered fine, not sure why this is happening intermittently on the 3rd-4th times?!
Drop down select function:
public handleDropdownChange(e) {
this.setState({ selectedOption: e.target.value });
{ setTimeout(() => {
this.getDocuments();
}, 1000); }
{ setTimeout(() => {
this.renderDocuments();
}, 2000); }
}
Render documents function:
public renderDocuments() {
const docs = this.state.documents.map(document => {
return (
<tr>
<td className="title">{document.Cells.results[3].Value }</td>
<td className="site">{siteName}</td>
<td className="path">{sitePath}</td>
<td><a href={document.Cells.results[6].Value + '?web=1&action=edit'}>View File</a></td>
</tr>
);
});
return (
<div id="tableID" className="table-list-container">
<table className="table-list">
<thead>
<th><button type="button" className="sort" data-sort="title">Title</button></th>
<th><button type="button" className="sort" data-sort="site">Site</button></th>
<th><button type="button" className="sort" data-sort="path">Path</button></th>
<th><button type="button">View File</button></th>
</thead>
<tbody className="list">
{docs}
</tbody>
</table>
<table className="table-footer">
<tr>
<td className="table-pagination">
<ul className="pagination"></ul>
</td>
</tr>
</table>
</div>
);
}
Render:
public render(): React.ReactElement<IKimProps> {
let { documents } = this.state;
return (
<div className={ styles.kim }>
{"Display Items that are pending review by Favourite Colour:"}
{documents.length === 0 && <p>Loading...</p>}
<select id="dropdown" onChange={this.handleDropdownChange}>
<option value="N/A">N/A</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<br/><br/>
{this.renderDocuments()}
</div>
);
}
}
You're right, JQuery and React being used together could have those results. There are enough packages for React, I recommend using one of those instead.

How to work with multiple inputs fields with .map - ReactJS

I have an assignment to make cryptocurrenty converter using API from coinmarketcap. I have manage to retrieve data and show everything but problem is that all fields act like one field.
You can see it here:
https://repl.it/repls/IncompatibleWhirlwindHarddrive
function App() {
const [data, setData] = useState("");
const [coinValue, setCoinValue] = useState("")
const [value, setValue] = useState("")
useEffect(() => {
let url = "https://cors-anywhere.herokuapp.com/https://sandbox-api.coinmarketcap.com/v1/cryptocurrency/listings/latest"
axios
.get(url,{
headers: {
'X-CMC_PRO_API_KEY': 'c8643baa-31bf-4d31-8868-af73ce84766b'
},
})
.then(result => setData(result.data.data));
}, []);
return (
<>
<table className="table ">
<thead>
<tr>
<th>Name</th>
<th>Short Name</th>
<th>$ Value</th>
<th>Last 24h</th>
<th>Amount you own</th>
<th>$ value of your coins</th>
</tr>
</thead>
<tbody>
{Array.isArray(data) &&
data.map(objects => {
let price = objects.quote.USD.price.toFixed(2)
let Result = (function() {
return price * coinValue
});
return (
<tr key={objects.name}>
<td>{objects.name}</td>
<td>
{objects.symbol}
</td>
<td onLoad={()=>setValue(price)}>
{price}
</td>
<td style={{color: objects.quote.USD.percent_change_24h > 0 ? "green" : "red"}}>{objects.quote.USD.percent_change_24h.toFixed(2)}</td>
<td>
<input required type="number" onChange={e => setCoinValue(e.target.value)} /> <br/>
<button className="btn" disabled={!coinValue} type="submit" onClick={Result}>Submit</button>
</td>
<td>
<Result></Result>
</td>
</tr>
);
})}
</tbody>
</table>
</>
);
}
export default App;
I need to every button be disabled until there is some value in input field but on input field that goes with that button.
Also I have to show conversion for only that field that input has value when you press submit.
Thank you in advance.

Error : 'list' is not defined no-undef 'route' is not defined no-undef

I am building web application using railway api, on submitting train number I am trying to display data but getting the above error. Actually I used if else condition on fetching data.
below is the code.
import React, { Component } from "react";
export default class TrainRoute extends Component {
constructor(props) {
super(props);
this.state = { trainNumber: "", trainRouteList: "" };
this.onChange = this.onChange.bind(this);
this.onSubmitForm = this.onSubmitForm.bind(this);
}
onChange(e) {
this.setState({ [e.target.id]: e.target.value } );
}
onSubmitForm(e) {
e.preventDefault();
fetch(
`https://api.railwayapi.com/v2/route/train/${
this.state.trainNumber
}/apikey/sch9lj34uy/`
)
.then(res => res.json())
.then(data => {
this.setState({ trainRouteList: data }, () =>
console.log(this.state.trainRouteList)
);
});
this.setState({ trainNumber: "" });
}
render() {
const { trainRouteList } = this.state;
if (!trainRouteList) {
const list = <div>No Trains Details to display</div>;
const route = <div>No Routes to display</div>;
} else {
const list = (
<div>
<table>
<tbody>
<tr>
<td>Train Name :</td>
<td> {trainRouteList.train.name} </td>
</tr>
<tr>
<td>Train Number :</td>
<td> {trainRouteList.train.number} </td>
</tr>
<tr>
<td>Class :</td>
<td>
{trainRouteList.train.classes.map(trainClass => (
<span key={trainClass.code}>{trainClass.code},</span>
))}{" "}
</td>
</tr>
</tbody>
</table>
</div>
);
const route = trainRouteList.route.map(routeInfo => (
<table>
<tbody>
<tr>
<td>Station :</td>
<td> {routeInfo.station.name} </td>
</tr>
<tr>
<td>Departure Time :</td>
<td> {routeInfo.schdep} </td>
</tr>
<tr>
<td>Arrival Time :</td>
<td> {routeInfo.scharr} </td>
</tr>
</tbody>
</table>
));
}
return (
<div>
<div className="container">
<form
onSubmit={this.onSubmitForm}
className="col-md-8 col-md-offset-4"
>
<div className="row">
<div className="col-md-3">
<input
type="number"
className="form-control input-lg"
placeholder="Train Number"
id="trainNumber"
value={this.state.trainNumber}
onChange={this.onChange}
/>
</div>
<div className="col-md-1">
<button type="submit" className="btn btn-warning btn-lg">
Check Route
</button>
</div>
</div>
</form>
</div>
<div className="card card-fluid">
<div className="container">
{list}
<h3>Train Route</h3>
{route}
</div>
</div>
</div>
);
}
}
Getting error at list and route in render method. Can Anyone tell
me why I am getting this error as I tried all possible solution
Its because list and route are block level variable and you are trying to access them outside of block.
Solution is, Define those variables outside then update the value in if and else block, by that way we can access anywhere inside render method. Like this:
render() {
const { trainRouteList } = this.state;
let list, route;
if (!trainRouteList) {
list = <div>No Trains Details to display</div>;
route = <div>No Routes to display</div>;
} else {
list = ....;
route = ....;
}

Categories