How to return the correct data in a map() function in react-native

Question

When I input data into my Text input, it goes into this array

WorkoutItems([...workoutTextItems, workoutText, setsText])

I want to get my data individually from each item, so for example, workoutText is the name of a workout, setsText is the amount of sets I want to do for that workoutenter image description here

So this is my code, I want to have 4 text inputs {workout name} {sets} {reps} {weights}, I don't want them to just be bundled together but to be able to pick where I want each item in the array so I can style them, how do I go about doing that as I'm pretty new to coding and this is my first project

This is what it is doing at the moment, it's just showing all the data and I can't choose where it goes

I've tried messing with the arrays and trying to remove the map but I'm pretty new to this so I'm really unsure what to try next

Answer 1

I think you should take a look at the react documentation.

You should use the useState hook like this:

const [count, setCount]=useState(0) for example

in your code, you've: const[workoutText, setText]= useState()

I think it's better to do something like this:

const [workout, setWorkout]=useState() const [sets, setSets]=useState() const [reps, setReps]=useState() const [weight, setWeight]=useState()

maybe your options on the bottom of the screen should be a bottom tab navigator, take a look at this documentation:

https://reactnavigation.org/docs/bottom-tab-navigator

I hope this helps you.