Develop Reference

Warning/Error : "Found x elements with non-unique id" REACTJS API REST

I want to do a form with the values corresponding of each book (with the id which is associate to), but the console write this warning "Found x(number of books) elements with non-unique id". So, it's written the informations of the same book everywhere, because the id isn't recognized. What can I change/add in my code please?
Here is my return:
return (
<div>
<MDBTable hover>
<MDBTableHead>
<tr>
<th>Titre</th>
<th>Auteur</th>
<th>Année de sortie</th>
<th>Edition</th>
<th>Type</th>
<th>Statut</th>
<th>Date d'achat</th>
<th></th>
</tr>
</MDBTableHead>
<MDBTableBody>
{
this.state.books.map(livre => (
<tr key={livre.id} onChange={this.Change} >
<td>{livre.title} </td>
<td>{livre.author}</td>
<td>{livre.year}</td>
<td>{livre.edition}</td>
<td>{livre.typeBook}</td>
<td>{livre.status}</td>
<td>{livre.date}</td>
<td><MDBBtn color="dark" onClick={this.toggle(8)}>Edit</MDBBtn>
<MDBModal isOpen={this.state.modal8} toggle={this.toggle(8)} fullHeight position="top">
<MDBModalHeader toggle={this.toggle(8)}>{livre.title}</MDBModalHeader>
<MDBModalBody>
<div className="grey-text">
<label htmlFor="title" className="grey-text">
Titre
</label>
<input
type="text"
id="title"
placeholder={livre.title}
className="form-control"
onChange={this.change}
/>
<br />
<label htmlFor="author" className="grey-text">
Auteur
</label>
<input
type="text"
id="author"
placeholder={livre.author}
className="form-control"
onChange={this.change}
/>
<br />
<label htmlFor="year" className="grey-text">
Année de sortie
</label>
<input
type="number"
id="year"
className={"form-control"}
placeholder={livre.year}
onChange={this.change}
/>
<br />
<label htmlFor="date" className="grey-text">
Date d&apos;achat
</label>
<input
type="date"
id="date"
placeholder={livre.date}
className="form-control"
onChange={this.change}
/>
<br />
<label htmlFor="edition" className="grey-text">
Edition
</label>
<input
type="text"
id="edition"
placeholder={livre.edition}
className="form-control"
onChange={this.change}
/>
<br />
<label htmlFor="typeBook" className="grey-text">
Type
</label>
<input
type="text"
id="typeBook"
placeholder={livre.typeBook}
className="form-control"
onChange={this.change}
/>
<br />
<label htmlFor="status" className="grey-text">
Statut
</label>
<input
type="text"
id="status"
placeholder={livre.status}
className="form-control"
onChange={this.change}
/>
</div>
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="danger" onClick={this.toggle(8)}>Annuler</MDBBtn>
<MDBBtn color="dark">Enregistrer</MDBBtn>
</MDBModalFooter>
</MDBModal>
</td>
</tr>
))
}
</MDBTableBody>
</MDBTable>
</div>
);
}

In your map you're creating elements with ids on them. You should be making those ids unique somehow. Where ever an element is given an id, that id must be unique or you'll have problems with apis that rely on them.
Open find, type in id=" and you should be able to see them. Since they're in a map, for every element of the array you're generating an element with the same id.
It's probably as easy as appending the index to the id or just omitting it unless you have a specific use for it.

Selecting form values in redux-from

I want to show form when click on radio button using redux-from, here is i following tutorial link, (implements using checkbox)
selectingformvalues but i cant implement it on radio button,
i have 2 radio button
radio button x click, shows a form
radio button y click, shows b form and hide a form
<label htmlFor="hasEmail">percentage</label>
<div>
<Field
name="taxtype"
component="input"
type="radio"
value="percentage"
/>
</div>
</div>
<div>
<label htmlFor="hasEmail">usd</label>
<div>
<Field
name="taxtype"
component="input"
type="radio"
value="usd"
/>
</div>
</div>
{usd && (
<div>
<label>Email</label>
<div>
<Field
name="email"
component="input"
type="email"
placeholder="Email"
/>
</div>
</div>
)}
{percentage && (
<div>
<label>Email 2</label>
<div>
<Field
name="email"
component="input"
type="email"
placeholder="Email"
/>
</div>
</div>
)}
const percentage = selector(state, 'percentage')
const usd = selector(state, 'usd')

Here is the example you referred you rewritten to include two radios
https://codesandbox.io/s/koz449qo6o

Unable to make form field compulsory

Below is the snapshopt of the form which i am rendering, everything works fine except that i am not able to make form fields compulsory.I am rendering this form by means of react component.
Code:-
return <div className="panel alignment div-background" id="new-trade-form">
{this.props.store.newTradeRender}
<div className="panel panel-default">
<div className="panel-heading center-align" ><strong>New Trade</strong></div>
</div>
<div className="panel-body">
<fieldset>
<form name="myForm" id="newForm" ref="newForm" data-toggle="validator" >
Trade Date:
<div className='input-group date'>
<input type='date' className="form-control" id="date" required />
<span className="input-group-addon">
<span className="glyphicon glyphicon-calendar"></span>
</span>
</div>
<br />
<div className="form-group">
Commodity:
<select className="form-control" id="commodity" ref="commodity" required>
<option disabled selected value=""> -- select a commodity -- </option>
{commodity}
</select>
</div>
Side:
<input type="radio" id="side" name="side" value="BUY" ref="side" />Buy
<input type="radio" id="side" name="side" value="SELL" ref="side" />Sell
<br />
<br />
<div className="form-group">
Counterparty:
<select className="form-control" id="counterparty" ref="counterparty" required>
<option disabled selected value=""> -- select a counter party -- </option>
{counterParty}
</select>
</div>
<br />
<div className="form-group">
Price($):<input id="price" name="price" type="number" step="any" className="form-control" ref="price" required />
</div>
<br />
<div className="form-group">
Quantity(MT):<input id="qty" name="qty" type="number" step="any" className="form-control" ref="qty" required />
</div>
<br />
<div className="form-group">
Location:
<select className="form-control" id="location" ref="location" required>
<option disabled selected value=""> -- select a location -- </option>
{location}
</select>
</div>
<br />
<button type='submit' className="btn btn-css btn-size" onClick={this.onSave} >SAVE</button>
</form>
</fieldset>
</div>
</div>
Note i am not getting any errors and everything works fine.
Below is the snapshot of the form:-

Try moving the handler from the button to the 's onSubmit:
<form name="myForm" id="newForm" onSubmit={this.onSave} data-toggle="validator" >
<input type='date' className="form-control" id="date" required />
<button type='submit'>SAVE</button>
</form>

remove onclick() and use submit only

#Shivendra Gupta, I have removed form tag and using refs object and assigning formRefs object when the user clicks save button a loop will run for formRefs objects and if the objects value is empty then you can show the particular filed is required. For reference I am logging the message. Hope that helps.
class Form extends Component {
constructor(props) {
super(props);
this.formRefs = {};
}
onSave = () => {
for(let key in this.formRefs) {
console.log(this.formRefs[key].value);
if(!this.formRefs[key].value) {
console.log(this.formRefs[key].getAttribute('id'), ' is required!');
}
}
}
onCancel = () => {
console.log('onCancel');
}
render() {
return (
<div className="panel alignment div-background" id="new-trade-form">
<div className="panel panel-default">
<div className="panel-heading" ><strong>Trade id: 0001 </strong></div>
</div>
<div className="panel-body">
<fieldset>
<div>
Trade Date:
<div className='input-group date'>
<input type='date' className="form-control" id="date" ref={(input) => {this.formRefs.date = input}} />
<span className="input-group-addon">
<span className="glyphicon glyphicon-calendar"></span>
</span>
</div>
<br />
<div className="form-group">
Commodity:
<select className="form-control" id="commodity" ref={(input) => {this.formRefs.commodity = input}}>
<option selected value=""> -- select a commodity -- </option>
</select>
</div>
Side:
<input type="radio" id="side" name="side" value="BUY" ref={(input) => {this.formRefs.side = input}} />Buy
<input type="radio" id="side" name="side" value="SELL" ref={(input) => {this.formRefs.side = input}} />Sell
<br />
<br />
<div className="form-group">
Counterparty:
<select className="form-control" id="counterparty" ref={(input) => {this.formRefs.counterparty = input}} >
<option disabled selected value=""> -- select a counter party -- </option>
</select>
</div>
<br />
<div className="form-group">
Price($):<input id="price" name="price" type="number" step="any" className="form-control"
ref={(input) => {this.formRefs.price = input}} />
</div>
<br />
<div className="form-group">
Quantity(MT):<input id="qty" name="qty" type="number" step="any" className="form-control"
ref={(input) => {this.formRefs.qty = input}} />
</div>
<br />
<div className="form-group">
Location:
<select className="form-control" id="location" ref={(input) => {this.formRefs.location = input}}>
<option disabled selected value="">-- select a location -- </option>
</select>
</div>
<br />
<button className="btn btn-css btn-size btn-spacing" onClick={this.onSave} >SAVE </button>
<button className="btn btn-css btn-size btn-spacing" onClick={this.onCancel} >CANCEL </button>
</div>
</fieldset>
</div>
</div>
)
}
}

Redux Form submit values without hitting submit

I am pretty sure that there is a way to do this with onChange, but in the example: http://redux-form.com/6.0.0-alpha.4/examples/simple/ here provided by redux form when you click the drop down and hit a value it automatically submits the value without having to hit submit.
I copied the exact code and everything works except for the fact that I have to choose all the values I want then hit submit. How do we make it to where we can just start typing in a field or select a value and it automatically get submitted as they have.
I will put the code below incase you do not want to visit the link.
import React from 'react'
import { Field, reduxForm } from 'redux-form'
const { DOM: { input, select, textarea } } = React
const SimpleForm = (props) => {
const { handleSubmit, pristine, reset, submitting } = props
return (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<div>
<Field name="firstName" component={input} type="text" placeholder="First Name"/>
</div>
</div>
<div>
<label>Last Name</label>
<div>
<Field name="lastName" component={input} type="text" placeholder="Last Name"/>
</div>
</div>
<div>
<label>Email</label>
<div>
<Field name="email" component={input} type="email" placeholder="Email"/>
</div>
</div>
<div>
<label>Sex</label>
<div>
<label><Field name="sex" component={input} type="radio" value="male"/> Male</label>
<label><Field name="sex" component={input} type="radio" value="female"/> Female</label>
</div>
</div>
<div>
<label>Favorite Color</label>
<div>
<Field name="favoriteColor" component={select}>
<option></option>
<option value="ff0000">Red</option>
<option value="00ff00">Green</option>
<option value="0000ff">Blue</option>
</Field>
</div>
</div>
<div>
<label htmlFor="employed">Employed</label>
<div>
<Field name="employed" id="employed" component={input} type="checkbox"/>
</div>
</div>
<div>
<label>Notes</label>
<div>
<Field name="notes" component={textarea}/>
</div>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>Submit</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
</div>
</form>
)
}
export default reduxForm({
form: 'simple' // a unique identifier for this form
})(SimpleForm)

Check if box in form has information or not

I want to check if my last name element has information on it with an "If" statement but i dont know where to place it or if im going about this wrong. The purpose is to eventually check if all the boxes are filled before i can hit the submit button. So whats the best way to go about checking this?
function check() {
let lastName = document.findElementById('last-name').value;
addressForm = document.shippingAddressForm;
addressForm.addEventListener('submit', (event) => {
event.preventDefault();
});
alert("Please enter all fields ");
}
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
<script src="main.js" defer></script>
</head>
<body>
<form id="shipping-address-form" name="shippingAddressForm" action="#" method="post">
<h1>Shipping Address</h1>
<div class="flex-container">
<div>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName" />
</div>
<div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName" />
</div>
</div>
<div class="flex-container">
<label for="address">Address:</label>
<input type="text" id="address" name="address" />
</div>
<div class="flex-container">
<div>
<label for="city">City:</label>
<input type="text" id="city" name="city" />
</div>
<div>
<label for="state">State:</label>
<input type="state" id="state" name="state" />
</div>
<div>
<label for="zip-code">Zip Code:</label>
<input type="text" id="zip-code" name="zipCode" />
</div>
</div>
<div class="flex-container">
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phoneNumber" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</div>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</body>

Problem
You didn't call the function check(). You only defined it.
Suggested solution
Try this I deleted the content of function check(). This example only shows calling the function (but better is using required attribute in HTML https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input required is on half of the page)
function check() {
alert("Please enter all fields ");
}
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
<script src="main.js" defer></script>
</head>
<body>
<form id="shipping-address-form" name="shippingAddressForm" action="#" method="post" onsubmit='check()'>
<h1>Shipping Address</h1>
<div class="flex-container">
<div>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName" />
</div>
<div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName" />
</div>
</div>
<div class="flex-container">
<label for="address">Address:</label>
<input type="text" id="address" name="address" />
</div>
<div class="flex-container">
<div>
<label for="city">City:</label>
<input type="text" id="city" name="city" />
</div>
<div>
<label for="state">State:</label>
<input type="state" id="state" name="state" />
</div>
<div>
<label for="zip-code">Zip Code:</label>
<input type="text" id="zip-code" name="zipCode" />
</div>
</div>
<div class="flex-container">
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phoneNumber" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</div>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</body>
and also if you want display error message with FF
Error messages
If you want Firefox to present a custom error message when a field fails to validate, you can use the x-moz-errormessage attribute to do so:
<input type="email"
x-moz-errormessage="Please specify a valid email address.">