Using expo and react-native I have created a screen called MainStateScreen this screen essentially has two direct children called OptionsComponent and NavigationButton. OptionsComponent has multiple children that when modified, update the state of the MainStateScreen so we can pass that as a prop to the next screen with the NavigationButton. That's how it's supposed to work at least.
Instead, when I try to modify the OptionsComponent's children and use MainStateScreen's update function I get the following error.
Here is pseudo-code of my component composition:
MainStateScreen.js
const defaultOptionsObject = [ { name: '', value: 1, count: 0, }, { name: '', value: 8, count: 0, }, { name: '', value: 20, count: 0, }, { name: '', value: 25, count: 0, }, { name: '', value: 30, count: 0, }, { name: '', value: 32, count: 0, }, { name: '', value: 100, count: 0, },]const MainStateScreen = () => { const [options, setOptions] = useState(defaultOptionsObject) return (<View><ScrollView><OptionsComponent options={options} setOptions={setOptions} /></ScrollView><NavigationButton onPress={() => navigation.push('OtherScreen', { options })} /></View> )}
OptionsComponent.js
const SingleOptionComponent = ({ index, option, options, setOptions }) => { const [stateOption, setStateOption] = useState({ ...option }) const updateCount = val => { const tempOption = { ...stateOption } if (val) { tempOption.count += 1 } else if (tempOption.count !== 0) { tempOption.count -= 1 } setStateOption(tempOption) } useEffect(() => { const tempOptions = [ ...options ] tempOptions[index] = { ...stateOption } setOptions(tempOptions) // Commenting this out removes the error. }, [stateOption]) const AddSubtractButton = () => { return (<View><TouchableHighlight onPress={() => updateCount(true)}><Text>Add</Text></TouchableHighlight><TouchableHighlight onPress={() => updateCount(false)}><Text>Subtract</Text></TouchableHighlight></View> ) } return (<ListItem rightElement={AddSubtractButton} /> )}const OptionsComponent = ({ options, setOptions }) => { return (<View> {options.map((option, index) => { return (<SingleOptionComponent key={`${option?.value}-${index}`} index={index} option={option} options={options} setOptions={setOptions} /> ) })}<View/> )}
The exact error is:
TypeError: undefined is not a function (near '...options.map...')This error is located at: in OptionsComponent (at MainStateScreen.js)
BUT when I console.log the setOptions function in the useEffect of SingleOptionComponent, Function setOptions is printed in the console.
If I remove the setOptions(tempOptions) call from the useEffect inside the SingleOptionComponent the error goes away but I need something like that to accomplish the pass up to the parent and over to the NavigationButton.
What could I be doing wrong?
