I have created a function to calculate the winner between the two selected pokemon. However, instead of using the newly selected option, it is using the previously selected option.
Here is my function:
function selectedWinner(){
console.log(pokemonName+' '+pokeOneTotal);
console.log(pokemonName2+' '+pokeTwoTotal);
if(pokeOneTotal>pokeTwoTotal){
setPokemonWinner(pokemonName);
}else if(pokeOneTotal<pokeTwoTotal){
setPokemonWinner(pokemonName2);
}else{
setPokemonWinner("Draw");
}
}
I have set it so that it is called in the different select functions, which are on click functions, here is one as an example:
function optionOneSelected(){
console.log('selected');
axios.get('https://pokeapi.co/api/v2/pokemon/'+ pokemonOne.current.value)
.then((res)=>{
let data=res.data;
console.log(data);
let type = data.types[0].type.name;
let id = data.id;
let height= data.height;
let weight = data.weight;
let name = data.forms[0].name;
let hp = data.stats[0].base_stat;
//console.log(type)
setPokemonType(type);
setPokemonId(id);
setPokemonHeight(height);
setPokemonWeight(weight);
setPokemonName(name);
setPokemonHp(hp);
let sum=0;
sum= data.stats[0].base_stat+ data.stats[1].base_stat+ data.stats[2].base_stat+ data.stats[3].base_stat+data.stats[4].base_stat+data.stats[5].base_stat;
setPokeOneTotal(sum);
let pokemonOneDataList = [
data.stats[0].base_stat, data.stats[1].base_stat, data.stats[2].base_stat, data.stats[3].base_stat,data.stats[4].base_stat,data.stats[5].base_stat
];
let labels = [
'hp', 'Attack', 'Defense', 'Special Attack', 'Special Defense', 'Speed'
];
setPokemonOneData(pokemonOneDataList);
setDataLabels(labels);
selectedWinner();
})
}
Here is the function where is it called:
<select onChange={optionOneSelected} ref={pokemonOne} onLoad= {() => this.optionOneSelected()}>
<option selected="selected" value="charmander">
charmander
</option>
{pokemonOptions}
</select>
Related
I follow this question to achieve the result Remove duplicate values from JS array. Also, I read a lot of stuff like https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set, but unfortunately, values are still duplicated
.map((devicedetails, index) => {
return (
<option key={index} value={[...new Set(devicedetails.groupName)]}>
{[...new Set(devicedetails.groupName)]}
</option>
);
});
Note: I thought it's clear but **devicedetails ** consists of JSON with multiple values, not just one
Result:
Updated:
before return: var list = [];
filteredList.map((devicedetails, index) => {
list.push(devicedetails.groupName);
if (list.length === index + 1) {
var data = [...new Set(list)];
data.forEach((element) => {
return <option value={element}>{element}/option>;
});
}
})
But in this case, is returning nothing in option but it's working I check via console.log(element)
You need to remove duplicates of the whole array and then map over the version with duplicates removed.
[...new Set(myArray)].map((devicedetails, index) => (
<option key={index} value={devicedetails.groupName}>
{devicedetails.groupName}
</option>
));
Instead of looping over devicedetails, outside of the return, create a modified array using the spread syntax and set it as a new variable. Then loop over that instead.
e.g.
const array = ['test', 'testing', 'test', 'test1234', 'testing']
const updatedArray = [...new Set(array)]
console.log(updatedArray)
I am new at React and I am stuck.
I have a table with data from database. I want to filter that table with a select dropdown. I have mulitple "select-fields" that works fine, because the value in the dropdown matches the exact value in database. But now I just want to check if the column value is null or a number.
In my select options I just want three options (see left picture):
All (Show all result. It is working)
Missing number(is null in Database. Not working)
Has number(Not working)
So the value in the table column (see right picture) I want to filter is either a number or null.
Here is my code so far:
const [filteredData, setFilteredData] = useState([]);
//Column in table:
{
Header: () => (<div>TableHead</div>),
accessor: "accessorToDatabase",
Cell: (props) => { return <div>{props?.cell?.value}</div> }
}
// The select dropdown and the table
<Col>
<Label>Select Dropbox</Label>
<Input type="select" onChange={handleChange('id', 'description')}>
<option>All</option>
<option value="false">Missing number</option>
<option value="true">Has number</option>
</Input>
</Col>
<Table columns={columns} data={filteredData} HandleRowData={HandleRowData} />
//The filter functions
const handleChange = name => ({ target: { value } }) => {
filter[name] = (value === 'All') ? null : value
if (checkProperties(filter)) {
var filtered = state
}
else {
var filtered = handleFilter(state, filter)
}
setFilteredData(filtered)
}
const handleFilter = (arr: Object[], filters: Object) => {
const filterKeys = Object.keys(filters)
return arr.filter(eachObj => {
return filterKeys.every(eachKey => {
if (!filters[eachKey] || !filters[eachKey].length) {
return true
}
})
})
}
I have tried with something like this, for looping through all values in the column, but without no success:
state.map(x=>((
x.id> 0 ? x.id : null)))
.map is used to transform one array of values/objects to another array with the same length but with transformed values/objects. What you want to use is .filter, which removes elements from an array but maintain the element structure.
To keep the ones that does not have an id:
array.filter(x => !x.id)
To keep the ones that has an id that is a number:
array.filter(x => !isNaN(x.id))
A simple Array.prototype.filter should do the trick:
//removes all entries with an id of `0 || null || undefined`
state.filter(entry=>!!entry.id)
//removes all entries with an id of `null || undefined` but keeps the 0
state.filter(entry=>!!entry.id || entry.id === 0)
I would not recommend using isNan: as it internally tries to parse strings to check if they are numbers you might end up with some unexpected behaviors. It also goes wild with booleans, null and undefined.
See this link for more info:
https://www.w3schools.com/jsref/jsref_isnan.asp
EDIT
Rereading your question it looks like you want
all items
items with an ID of type number
items that are not numbers
Here is how you could implement that
const [items,setItems]= useState(someItems)
const [filter, setFilter]=useState('all')
function handleChange(e){
setFilter(e.target.value)
}
const filteredItems = items.filter(item=>{
if(filter === 'number')
return typeof items === 'number'
if(filter === 'no-number')
return typeof item !== 'number'
return true
})
return (
<React.Fragment>
<select onChange={handleChange}>
<option value='all'>All</option>
<option value='no-number'>Missing number</option>
<option value="number">Has number</option>
</select>
<Table columns={columns} data={filteredData} HandleRowData={HandleRowData} />
</React.Fragment>
)
Change the elements with the specific library you are using and you are good to go
I would recommend not using NaN, as it tries to parse strings. Instead, you can create an array and use the map function, in combination with the filter function.
I filled my dropdownlist by angular js from json. But selection is not working on update i can not get selected value . How can i select dropdownlist selected item?
//get single record by ID
$scope.getForUpdate = function (Branch) {
debugger
var getData = myService.getBrancheTypes();
getData.then(function (response) {
debugger
$scope.BrancheTypes = response.data;
}, function (error) {
console.log(error);
toastr.error("Error in getting records.");
});
debugger
$scope.Branch_ID = Branch.Branch_ID;
$scope.Branch_Name = Branch.Branch_Name;
$scope.Branch_Address = Branch.Branch_Address;
$scope.Branch_email = Branch.Branch_email;
$scope.Branch_Notes = Branch.Branch_Notes;
$scope.Branch_TimeFrom = new Date(moment(Branch.Branch_TimeFrom));
$scope.Branch_TimeTo = new Date(moment(Branch.Branch_TimeTo));
$scope.Branch_CreatedDate = new Date(moment(Branch.Branch_CreatedDate));
$scope.Branch_Manager = Branch.Branch_Manager;
$scope.Branch_TypeId = Branch.Branch_TypeId; // Branch.Branch_TypeId = 1
$scope.Branch_Type = $scope.BrancheTypes[Branch.Branch_Type]; // Object {BranchTypeId: 1, BranchTypeName: "Head Office", Branches: null}
$scope.Branch_Phone = Branch.Branch_Phone;
$scope.Branch_Fax = Branch.Branch_Fax;
$scope.saturday = Branch.saturday;
$scope.sunday = Branch.sunday;
$scope.monday = Branch.monday;
$scope.tuesday = Branch.tuesday;
$scope.wednesday = Branch.wednesday;
$scope.thursday = Branch.thursday;
$scope.friday = Branch.friday;
};
<select ng-model="Branch_Type">
<option value="{{field.BranchTypeId}}" ng-selected="true"
ng-repeat="field in BrancheTypes | orderBy:'BranchTypeId'">
{{field.BranchTypeName}}
</option>
</select>
this is the values on debug
enter image description here
Try changing your html to this
<select ng-model="selectedDevice"
ng-options="field.BranchTypeId as field.BranchTypeName for field in BrancheTypes | orderBy:'BranchTypeId'">
<option></option>
</select>
I'm trying to remove existing specific value in an array before adding or push another updated value. My purpose is to avoid duplicate same id and value to array. What i'm trying to achieve is when onchange triggered check if that value is existing on array and if exist remove the old one and push the update value.
const [array, setnewarray] = useState([]);
function handlechangeselected(val,id){
var newarray = array;
const valueToRemove = id;
newarray.filter(item => item.id === valueToRemove);
newarray.push({ value: val, id:id });
setnewarray(newarray);
}
<select
onChange={(e) => handlechangeselected(e.target.value,row.ID)}
>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
The first issue is that filter doesn't modify the array, but rather returns a new array. You're not using the returned array, so newArray is unchanged.
The other issue is that filter filters out out any values that return false from your callback, so you want your filter to return true for any items that don't match valueToRemove (in other words, !== instead of ===). You can also use .concat to chain after array.filter.
Here it is, simplified a bit:
const [array, setNewArray] = useState([]);
function handlechangeselected(value, id){
const newArray = array
.filter(item => item.id !== id)
.concat({ value, id });
setNewArray(newArray);
}
const bands = this.props.ApplicationContainer.bands;
if(bands) {
var bandsHtml = '<Select defaultValue="Select"><Option value="Select">Select</Option>';
const listItems = bands.map(function(obj) {
const rObj = {};
rObj[obj.id] = obj.band;
bandsHtml += '<Option value="'+obj.band+'">'+obj.band+'</Option>';
return rObj;
});
bandsHtml += '</Select>';
} else {
var bandsHtml='';
}
console.log(bandsHtml);
return (
bandsHtml
);
The function returns what goes into the Table, but please check out this image:
https://ibb.co/jNBYnk
It displays as HTML in the cell. Any ideas on how it could be rendered as a Select in the Antd Table?
let bandsHtml = null
if(bands) {
bandsHtml =
<Select defaultValue="Select">
<Option value="Select">Select</Option>
{bands.map( (obj,index) => (<Option value={obj.band} key={index}>{obj.band}</Option>)}
</Select>
}
/de SM0XLK ;-)