Hi I am using react formik and react-select package I create form create and update in component. I want to create an multiple Select values are send to string But now going as array. On update also want to Bind as string Is it possible.
Please Help us Thanks for Help
code Sandbox Link : https://codesandbox.io/s/multipleselect-formik-3eqxp?file=/src/RegisterForm.js
Let me know if you want something else, but this is what I understand. You want developer,engineer to be sent to the API. Change you onSubmit like this and you will get the jobs the way you want.
const onSubmit = (values) => {
const jobs = [];
values.job.map((ele) => jobs.push(ele.value));
console.log("text => ", jobs.toString());
};
Related
I'm using Inertia.js and I've been loving it.
I'm having a problem anyway that I cant seem to figure out. I have a select input that will contain options from the database but a lot of them aprox. 30/40k so my idea is to just take the first 20 and then let the user input a search and bring the first 20 that match that result.
All my backend is working ok but the problem I'm having is displaying the updated select options after search.
The relevant code is the following: First the call to AsyncSelect Component from the react-select package. This components needs a loadOptions property that will call a function when the user start typing
<AsyncSelect
name="proveedores"
id="proveedores"
defaultOptions={proveedores}
loadOptions={handleChange}
/>
The function that gets call is this, it recieves the input value and a callback, within this callback I'm supposed to search for the new data and return it
function handleChange(inputValue,callback) {
setValues(values => ({
...values,
["search"]: inputValue
}));
callback()
}
The problem is that to load the new data on search I'm using useEffect
useEffect(() => {
if (prevValues) {
const query = pickBy(values)
Inertia.get(window.location.href, query, {
replace: true,
preserveState: true
});
}
}, [values]);
The search with useEffect works ok, if I do a console.log I will see the list of proveedores updated but the problem is how do I tell the callback from handleChange function that it should listen for useEffect and on finish use the new value of proveedores
If anyone had to do something like this (React Select with search data from database) using Inertia + React, i would really appreciate some feedback on how to achieve it.
Thanks!!
I am currently working on a fun project and I want to know how to do something that has stumped for a bit.
Basically I am using Axios to get my data and then rendering data out in a .map func then I have a click function to show only the data that is corresponding to the ID for example ID 1 has some values that I want to show in another component. How do I do that?
https://j99t7.csb.app/
If you see my sand box and click on one of the ids and see the console / code - this is where I am stuck at.
Cheers,
Dave :)
In order to filter the data, you can use something like:
const [filteredData, setFilteredData] = useState([]);
//onclick
setFilteredData(data.filter(element => element.id === id));
//jsx return
filteredData.map(filteredElement => {
//loop through elements and display data desired
})
Though I'm not a React Master, onClick doesn't return JSX or TSX.
i.e where would the returned value be rendered, in most cases, it used as a void function with no return value
I use a react module that manages the use of spreadsheets:
react-spreadsheet https://github.com/iddan/react-spreadsheet/
In my project, I need several spreadsheets, and therefore several tables that the user can add, modify, delete on the fly
At the beginning, I wanted to use a big useState variable where the data arrays would be concentrated in the form : stateData = [ [...arrays], [...arrays...] ]
But the module, which uses an OnChange function taking as value the setData, seems to bug when my stateData variable contains different arrays.
<Spreadsheet key={index} className='table' columnLabels={stringLabelCol} rowLabels={stringLabelRow} data={stateData[index]} onChange={setData} />
As I can't manage everything in one UseState with this module,
is it possible to create a series of UseState inside a loop ?
It seems to me that it is a bad practice but I am really blocked
Thank you for reading my text... :/
Seeing your code and your comment, I'm assuming that:
You have one useState named data with ALL your data in it
You have multiple spreadsheets
For each spreadsheet, you want to pass the sheetData and the onChange that updates it
The issue in your code is that you're setting onChange={setData}, meaning any change will override the WHOLE data object, not just the targeted index.
What you want to do is have your onChange function be a function that updates only the right part of your state. So you'd do it like so:
const [data, setData] = useState([])
const updateSheetData = (index, sheetData) => {
// We clone the current state
const tempData = [...data]
// We update the right index
tempData[index] = sheetData
// This is now the new state
setData(tempData)
}
//...
// the onChange function for our component will use our custom function
<Spreadsheet
key={index}
className='table'
columnLabels={stringLabelCol}
rowLabels={stringLabelRow}
data={stateData[index]}
onChange={(newData) => updateSheetData(index, newData)}
/>
Then you'll also have to correctly update the data state whenever you add a new sheet or remove a sheet, to make sure the index are updated. But the idea is the same
I am new to React Native and was trying to make some experiences with hooks. In my app I want to refresh a wifi name when I click on a button. I know this can be done without using the refresh button, but it goes against what I am trying to learn.
The problem here is that when I click the button to refresh the variable unreloaded_netInfo, it does change, because console.log shows the changes, but the value in the Text element does not. What am I doing wrong?
Thanks for any help.
I have this code
<View style={styles.container}>
<Text>Wifi name: {unreloaded_netInfo.details.ssid}</Text>
<Button onPress={reloadWifiName} title="refresh" color='#042417'/>
</View>
reloadWifiName:
const netInfo = NetInfo.useNetInfo();
const [unreloaded_netInfo, setNetInfoReload] = useState(netInfo);
const reloadWifiName = () => {
let aux=unreloaded_netInfo;
if(netInfo.type=="wifi")
{
aux.details.ssid=netInfo.details.ssid;
setNetInfoReload(aux);
}
else setNetInfoReload(netInfo);
}
When you use setNetInfoReload(), React only does a shallow comparison i.e == instead of ===, in order to decide whether to re-render or not. You should try to clone the aux object and update setNetInfoReload() with the cloned object
You could like this to declare one metaData variable
const [metaData, setMetaData] = useState(false).
When your state data update at that time also please update metaData value.
setNetInfoReload(aux)
setMetaData(! metaData)
I am trying to implement a table in react where the user can edit individual rows by clicking the edit button on a row and then submit once he has made his change. I have say two components App.js and its child Table.js to implement this.
The way I thought of doing this initially was letting each of this component have their own state for rows and then the Table component reads from the props send to it by parent initially and only change the parent rows when users submits the change as oppose to onChange event. But I've read that reading props into state is an anti-pattern.
So decided to have everything in the parent by having two values for row (oldrows,newrows). And using them to maintain state instead, This is the design I came up with :
But what happens is whenever I click cancel the oldRows get bound to the newRows, here is a codePen example I put up:
https://codepen.io/snedden-gonsalves/pen/zYOVMWz
handleChangeRowInput = (event, keyValue) => {
let keyVals = [...this.state.newValuesArray];
keyVals[this.state.editIndex][keyValue] = event.currentTarget.value;
this.setState({
newValuesArray: keyVals
})
}
handleCancelRowInput = () => {
this.setState({
newValuesArray: [...this.state.oldValuesArray],
editIndex: -1
})
console.log('array', this.state.newValuesArray)
}
handleSubmitRowInput = () => {
this.setState({
oldValuesArray: [...this.state.newValuesArray],
editIndex: -1
})
}
In the codePen example if you enter a new value then cancel and then try adding a new value again the the old values and new values get bound.
I tried using lodash deepClone but it didn't work out, not sure why this is happening.
Also if you could comment on what is the best way to design this in react that would be awesome as I am very new to react and just trying to learn ..
I didn't find any issue after the cancel function. For me, the issue was coming up after I called the save function.
After clicking on the save button and then editing again, the old values and new values were get bound.
The handleSubmitRowInput function should create a new array for the oldValuesArray using the cloneDeep function
handleSubmitRowInput = () => {
this.setState({
oldValuesArray: _.cloneDeep(this.state.newValuesArray),
editIndex: -1
})
}