Correct way of rendering a React Native component-CodePudding

i have this simple component that has inputs, and when i type something only the target input will change, and it's working fine.

  const ScaleLabel = (): JSX.Element => {
    return (
      <View>
        {scaleLabel.map((label, i) => (
          <TextInput
            value={label}
            onChangeText={(text) =>
              setScaleLabel(
                scaleLabel.map((item, index) => (index === i ? text : item))
              )
            }
          />
        ))}
      </View>
    );
  };

I'm rendering it as

 {choice === "Escala de 0 a 10" && ScaleLabel()}

But if i render it as

 {choice === "Escala de 0 a 10" && <ScaleLabel />}

Everytime i type something, the keyboard disappears. Why does it happen?

CodePudding user response：

I found a same type question. Can you check whether this solves your problem?

Issue: React-Native - Keyboard closes on each keystroke for TextInput

https://stackoverflow.com/a/61701098/8743951