I'm new to react and react-admin and I have a problem with CheckboxGroupInput or with any input of array type.
I have a form, this is the code:
export const MoviesCreate = (props) => (
<Create {...props}>
<SimpleForm>
<TextInput source="name" validate={[required()]} />
<TextInput source="actors" validate={[required()]} />
<TextInput source="year" validate={[required()]} />
<CheckboxGroupInput source="gender" validate={[required()]} choices={[
{ id: 'Action', name: 'Action' },
{ id: 'Adventure', name: 'Adventure' },
{ id: 'Animation', name: 'Animation' },
{ id: 'Biography', name: 'Biography' },
]} />
</SimpleForm>
</Create>
);
So when I want to create a new item, after I hit the save button I got this error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
I think the problem is that the response from REST API is not correctly returned but I don't know what is the correct format for that. These are the responses that I tried to returned from REST API but nothing works:
1.
{id: 42, name: "test", year: "1234", actors: "asd", gender: "Adventure,Animation"}
2.
{id: 43, name: "Black Friday", year: "1234", actors: "asd", gender: ["Animation", "Adventure"]}
3.
{id: 43, name: "Black Friday", year: "1234", actors: "asd", gender: [{id: "Adventure", name: "Adventure"}, {id: "Animation", name: "Animation"}]}
4.
{id: 43, name: "Black Friday", year: "1234", actors: "asd", gender: {id: "Animation", name: "Animation"}}
I have the same problem with ArrayInput or AutocompleteArrayInput...
Can anyone help me with this problem and tell me what am I doing wrong?
If you want to let the user choose multiple values among a list of possible values by showing them all,<CheckboxGroupInput> is the right component. Set the choices attribute to determine the options (with id, name tuples):
Description
<CheckboxGroupInput source="category" choices={[
{ id: 'programming', name: 'Programming' },
{ id: 'lifestyle', name: 'Lifestyle' },
{ id: 'photography', name: 'Photography' },
]} />
So,the response from REST API should be like:option 3
{id: 43, name: "Black Friday", year: "1234", actors: "asd", gender: [{id: "Adventure", name: "Adventure"}, {id: "Animation", name: "Animation"}]}
Related
I want to render a Card Item for each dropdown item in my react-multi-select component.
I know there is a way to change the label using the item renderer as shown in Manipulate React Render Properties but is there a way to render a more complicated UI that consists of images and divs?
This is my current code:
<Multiselect
defaultMenuIsOpen
placeholder=""
{...field}
inputRef={ref}
displayValue="name"
onSelect={(selected, item) => {
setValue('test', selected)
}}
onRemove={(selected, item) => {
setValue('test', selected)
}}
options={[
{ value: 'chocolate', name: 'Chocolate', id: 1 },
{ value: 'strawberry', name: 'Strawberry', id: 2 },
{ value: 'vanilla', name: 'Vanilla', id: 3 },
]}
/>
The code above gives me a UI of
The data that I want to add in is as below:
const data = [
{
id: 1,
title: 'Test1',
supply: 1,
owners: 5,
},
{
id: 2,
title: 'Test2',
supply: 10,
owners: 50,
},
{
id: 3,
title: 'Test3',
supply: 100,
owners: 500.
},
]
I have a piece of code that creates a sectioned multi select component based on https://github.com/renrizzolo/react-native-sectioned-multi-select.
This is my code:
import React, { useState } from 'react';
import {I18nManager,View,Text,SafeAreaView,Image,SectionList,TouchableOpacity,TextInput,ScrollView,useWindowDimensions,Linking} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import SectionedMultiSelect from 'react-native-sectioned-multi-select';
export function SellWithUsFirstScreen3(props){
const items = [
{
name: "Fruits",
id: 0,
children: [{
name: "Apple",
id: 10,
},{
name: "Strawberry",
id: 17,
},{
name: "Pineapple",
id: 13,
},{
name: "Banana",
id: 14,
},{
name: "Watermelon",
id: 15,
},{
name: "Kiwi fruit",
id: 16,
}]
},
{
name: "Gems",
id: 1,
children: [{
name: "Quartz",
id: 20,
},{
name: "Zircon",
id: 21,
},{
name: "Sapphire",
id: 22,
},{
name: "Topaz",
id: 23,
}]
},
{
name: "Plants",
id: 2,
children: [{
name: "Mother In Law\'s Tongue",
id: 30,
},{
name: "Yucca",
id: 31,
},{
name: "Monsteria",
id: 32,
},{
name: "Palm",
id: 33,
}]
},
]
const [selectedItems,setselectedItems] = useState([]);
onSelectedItemsChange = (theitem) => {
setselectedItems(prevState => [...prevState, theitem]);
}
console.log(selectedItems);
/////////
return (
<SafeAreaView style={{flex:1,backgroundColor:'white'}}>
<View style={styles.container}>
<View>
<SectionedMultiSelect
items={items}
uniqueKey='id'
subKey='children'
selectToggleIconComponent={<Icon name='folder' />}
dropDownToggleIconUpComponent={<Icon name='chevron-up' />}
dropDownToggleIconDownComponent={<Icon name='chevron-down' />}
selectedIconComponent={<Icon name='heart' />}
selectText='Choose some things...'
showDropDowns={true}
readOnlyHeadings={true}
onSelectedItemsChange={this.onSelectedItemsChange}
selectedItems={selectedItems}
IconRenderer={Icon}
/>
</View>
</View>
</SafeAreaView>
);
}
I get this error:
TypeError: undefined is not an object (evaluating 'item[subKey]').
I tried several code changes but I still can't get the same result as the original author video images.
Any help please?
I think your problem is that you need double quotation marks around the strings so uniqueKey="children" for each of them. Also there is no this. so you must make onSelectedItemsChange={this.onSelectedItemsChange} into onSelectedItemsChange={onSelectedItemsChange}
I am having an issue with pushing an object into an array. I am fetching an array of objects from a local .json file. I am trying to create a function that pushes the given object into an array, so I can use it later on.
This is how I am receiving my object.
{id: 3176, name: "Matthias Ginter", position: "Defender", dateOfBirth: "1994-01-03T00:00:00Z", countryOfBirth: "Germany", …}
countryOfBirth: "Germany"
dateOfBirth: "1994-01-03T00:00:00Z"
id: 3176
name: "Matthias Ginter"
nationality: "Germany"
position: "Defender"
role: "PLAYER"
__proto__: Object
My code in React:
{data.map(
(player) => (
player.position == null ? (player.position = "Coach") : null,
(
<PlayerCard
name={player.name}
position={player.position}
dateOfBirth={player.dateOfBirth}
nationality={player.nationality}
id={player.id}
handleClick={() => selectedPlayers.push(player)}
/>
)
)
)}
and the array I am trying to push into:
let selectedPlayers = [
{
id: 3176,
name: "Matthias Ginter",
position: "Defender",
dateOfBirth: "1994-01-03T00:00:00Z",
countryOfBirth: "Germany",
nationality: "Germany",
role: "PLAYER",
},
{
id: 3176,
name: "Mat Giensien",
position: "Defender",
dateOfBirth: "1994-01-03T00:00:00Z",
countryOfBirth: "Germany",
nationality: "Germany",
role: "PLAYER",
},
];
if I do handleClick = {() => {console.log(player)}} I get the object as shown above. What am I missing ?!
I read through all the topics here in SO but couldn't find a solution that would work for me. I have tried all the reccomended ways in the other topics and they still don't work for me.
Please, halp meeeeh :)
{data.map(player => {
return (
<PlayerCard
name={player.name}
position={player.position ? "Coach" : null}
dateOfBirth={player.dateOfBirth}
nationality={player.nationality}
id={player.id}
handleClick={() => selectedPlayers.push(player)}
/>
)
)}
Try this:
let selectedPlayers = [
{
id: 3176,
name: "Matthias Ginter",
position: "Defender",
dateOfBirth: "1994-01-03T00:00:00Z",
countryOfBirth: "Germany",
nationality: "Germany",
role: "PLAYER"
},
{
id: 3176,
name: "Mat Giensien",
position: "Defender",
dateOfBirth: "1994-01-03T00:00:00Z",
countryOfBirth: "Germany",
nationality: "Germany",
role: "PLAYER"
}
];
let newData = {id: 9999, name: "bob jones", position: "goalkepper", dateOfBirth: "2020-01-03T00:00:00Z", nationality: "Spain", role: "MANAGER"}
selectedPlayers.push(newData);
console.log( selectedPlayers );
You might have to mess around with the formatting of the recevied object and the object you're pushing into to make iy work properly. But, if you're in control of the code and the JSON file then that shouldn't be an issue...
I am building a reactjs web app where I use mbrn/material-table(
https://github.com/mbrn/material-table) .The table has a functionality to check all rows in a field at once.But to unselect(or uncheck) all rows ,you need to click on the select all checkbox and then click on it again to uncheck all rows.I have read the documentation of the framework but have not been able to find a functionality implement unchecking all rows at once with a button.
import MaterialTable from "material-table";
const table = () => {
return (
<MaterialTable
columns={[
{ title: "ID" },
{ title: "name" },
{ title: "SurName" },
{
title: "Birthyear"
},
{ title: "BirthCity" },
{
title: "Sex"
},
{
title: "Type"
}
]}
data={[
{
id: 1,
name: "a",
surname: "Baran",
birthYear: 1987,
birthCity: 63,
sex: "Male",
type: "adult"
},
{
id: 2,
name: "b",
surname: "Baran",
birthYear: 1987,
birthCity: 34,
sex: "Female",
type: "adult",
parentId: 1
},
{
id: 3,
name: "c",
surname: "Baran",
birthYear: 1987,
birthCity: 34,
sex: "Female",
type: "child",
parentId: 1
},
{
id: 4,
name: "d",
surname: "Baran",
birthYear: 1987,
birthCity: 34,
sex: "Female",
type: "child",
parentId: 3
},
{
id: 5,
name: "e",
surname: "Baran",
birthYear: 1987,
birthCity: 34,
sex: "Female",
type: "child"
},
{
id: 6,
name: "f",
surname: "Baran",
birthYear: 1987,
birthCity: 34,
sex: "Female",
type: "child",
parentId: 5
}
]}
actions={[
{
tooltip: "Remove All Selected Users",
icon: icons,
onClick: (evt, data) =>
alert("You want to delete " + data.length + " rows")
}
]}
// onSelectionChange={rows =>
// // alert("You selected " + rows.length + " rows")
// }
options={{
selection: true
}}
parentChildData={(row, rows) => rows.find(a => a.id ===
row.parentId)}
title="Search Results"
/>);
I want that on click of a button,all selected rows should get unselected
Since material table actually mutates your data, you can just use something like this:
this.state.data.forEach(d => {if(d.tableData)d.tableData.checked = false});
and set that as the new state. That is not the prettiest, because of the state mutation, but it is the only way, since material table itself mutates it.
You can use onAllSelected function from the tableRef like that
import MaterialTable from "material-table";
import { useRef } from 'react';
const Table = () => {
const tableRef = useRef()
return (
<>
<button onClick={
() => {tableRef.current?.onAllSelected(false)}}>
clear selection
</button>
<MaterialTable {...all props you need} tableRef={tableRef} />
</>
);
The issue was raised here.
I am new at ReactJs and try to complete a task from the youtube channel.
I created array "products" in "SchoolProduct.js" then using props I passed the value in Product.js.
Now in App.js, I used map function to get data
(Maybe I understand something wrong about props or map function)
Here is SchoolProduct.js:
const products = [
{
id: "1",
name: "pencil",
price: 1,
description: "this is pencil"
},
{
id: "2",
name: "rubber",
price: 10,
description: "this is rubber"
}
]
this is my Product.js
import React from "react"
function Product(props)
{
return
(
<div>
<h2>{props.product.name}</h2>
<p>{props.product.price.toLocaleString("en-US", {style: "currency",
currency: "USD"})}
- {props.product.description}</p>
</div>
)
}
export default Product
and this my App.js
import React, { Component } from 'react';
import Product from "./Product"
import productsData from "./SchoolProduct"
function App(){
const productsComponents = productsData.map(item => <Product product=
{item}/>)
return (
<div>
{productsComponents}
</div>
)
}
export default App;
The Error is:
TypeError: _SchoolProduct__WEBPACK_IMPORTED_MODULE_2___default.a.map is not a function
its shows error in App.js line no 8, which is "const productsComponents"
I know I create a silly mistake, but I am trying to improve it
I have to export my error in default way,
const products = [
{
id: "1",
name: "pencil",
price: 1,
description: "this is pencil"
},
{
id: "2",
name: "rubber",
price: 10,
description: "this is rubber"
}
]
export default products
export default [
{
id: "1",
name: "Pencil",
price: 1,
description: "Perfect for those who can't remember things! 5/5 Highly recommend."
},
{
id: "2",
name: "Housing",
price: 0,
description: "Housing provided for out-of-state students or those who can't commute"
},
{
id: "3",
name: "Computer Rental",
price: 300,
description: "Don't have a computer? No problem!"
},
{
id: "4",
name: "Coffee",
price: 2,
description: "Wake up!"
},
{
id: "5",
name: "Snacks",
price: 0,
description: "Free snacks!"
},
{
id: "6",
name: "Rubber Duckies",
price: 3.50,
description: "To help you solve your hardest coding problems."
},
{
id: "7",
name: "Fidget Spinner",
price: 21.99,
description: "Because we like to pretend we're in high school."
},
{
id: "8",
name: "Sticker Set",
price: 14.99,
description: "To prove to other devs you know a lot."
}
]