How to execute useState dynamically from strings in react hooks? - reactjs

Question

I have an object
const configs = [
{
label: 'Title',
name: 'Title',
value: titleToString,
field: SinglelineTextfield,
uniqueIdentifier: 0,
stateVar: 'criticalObjectTitle',
setStateVar: 'setCriticalObjectTitle',
},
{
name: 'type',
uniqueIdentifier: 1,
label: 'type',
value: typeToString,
field: SinglelineTextfield,
stateVar: 'criticalObjectType',
setStateVar: 'setCriticalObjectType',
},
{
name: 'Domain',
label: 'Domain',
value: domainToString,
field: SinglelineTextfield,
uniqueIdentifier: 2,
stateVar: 'criticalObjectDomainName',
setStateVar: 'setCriticalObjectDomainName',
}
]
I am retrieving the setState Variable wwwith the setFindVal in my onChange
const onChange = async (e) => {
const name = e.target.name || e.target.getAttribute('name')
const value = e.target.innertext ? e.target.innertext
: e.target.value
const setFindVal = configs.find(config => config.name === name).setStateVar
setFindVal(value)
console.log(setFindVal(value));
}
However, when I want to use setFindVal as a useState hook, it tells me that setFindVal is not defined..When I log setFindVal and its property type i get its a string, so I have created a useState hook outside of my function, however this still does not work. How do I convert a string into a useState function?
Error:
Uncaught (in promise) TypeError: setFindVal is not a function
Full code:
const editCriticalObjects = props => {
const query = new URLSearchParams(props.location.search)
const criticalObjectsId = query.get('id')
const loading = useContext(LoadingContext)
const user = useContext(UserContext)
const testing = useContext(TestingFrameworkContext)
const [editCriticalObjects, setEditCriticalObjects] = useState(null)
const [findval, setFindVal] = useState(null)
const [criticalObjectTitle, setCriticalObjectTitle] = useState(null)
const [criticalObjectDomainName, setCriticalObjectDomainName] = useState(null)
useEffect(() => {
async function onLoadCriticalObjects() {
loading.setLoading(true)
const results = await get(`get_critical_objects?id=${criticalObjectsId}`, user.user)
setEditCriticalObjects(results)
loading.setLoading(false)
}
onLoadCriticalObjects()
}, [])
const assetIdObject = editCriticalObjects && editCriticalObjects.filter(obj => {
if (obj.asset_id === criticalObjectsId )
return obj
})
console.log(assetIdObject);
const title = assetIdObject && assetIdObject.map(item => item.asset_id)
console.log(titleToString);
const titleToString = title && title.join(', ')
const domain = assetIdObject && assetIdObject.map(item => item.Domains.toString())
const domainToString = domain && domain.join(', ')
const type = assetIdObject && assetIdObject.map(item => item.type.toString())
const typeToString = type && type.join(', ')
const configs = [
{
label: 'Title',
name: 'Title',
value: titleToString,
field: SinglelineTextfield,
uniqueIdentifier: 0,
stateVar: 'criticalObjectTitle',
setStateVar: 'setCriticalObjectTitle',
},
{
name: 'type',
uniqueIdentifier: 1,
label: 'type',
value: typeToString,
field: SinglelineTextfield,
stateVar: 'criticalObjectType',
setStateVar: 'setCriticalObjectType',
},
{
name: 'Domain',
label: 'Domain',
value: domainToString,
field: SinglelineTextfield,
uniqueIdentifier: 2,
stateVar: 'criticalObjectDomainName',
setStateVar: 'setCriticalObjectDomainName',
}
]
const getObjectParams = {
asset_ids: criticalObjectTitle,
asset: true,
merge: true,
}
const onChange = async (e) => {
const name = e.target.name || e.target.getAttribute('name')
const value = e.target.innertext ? e.target.innertext
: e.target.value
const setFindVal = configs.find(config => config.name === name).setStateVar
setFindVal(value)
console.log(setFindVal(value));
}
const onClick = async () => {
loading.setLoading(true)
const results = await verifiedPost('post_critical_objects', testing.getObjectParams, user.user)
loading.setLoading(false)
console.log(getObjectParams);
}
return (!editCriticalObjects ? null :
<React.Fragment>
<PageWrapper title='Edit Critical Objects:'>
<div className='Main Card editCriticalObjectFormWrapper'>
{configs.map((config, k)=> {
const Field = config.field
return (
<React.Fragment key={config.name} >
<Field
style={{ marginBottom: '15px'}}
name={config.name}
placeholder={config.name}
value={config.stateVar}
initialValue={config.stateVar}
initialValues={config.stateVar}
uniqueIdentifier={k}
label={config.label}
onChange={onChange}
/>
</React.Fragment>
)
})}
<Button
className='Button Ghost Approve'
text='Submit'
onClick={onClick}
/>
</div>
</PageWrapper>
</React.Fragment>
)
}
export default editCriticalObjects
logging one value
new onchange:
const onChange = async (e) => {
const name = e.target.name || e.target.getAttribute('name')
const value = e.target.innertext ? e.target.innertext
: e.target.value
const setFindVal = configs.find(config => config.name === name).setStateVar;
setStateValues[setFindVal](value);
console.log(setFindVal, value);
}

Answer 1

The reason your getting it's not a function is because you are just using the value from the configs object which is a string.
You should assign the function as the value in config
const configs = [
{
...
setStateVar: setCriticalObjectTitle,
},
{
...
setStateVar: setCriticalObjectType,
},
{
...
setStateVar: setCriticalObjectDomainName,
}
];