как объединить в один объект из разных строк в useState?

Question

Мне нужно записать в обработчик значения разные данные из разных текстовых вводов

const [value, setValue] = useState({
  title: '',
  url: '',
  description: '',
});

<View style={styles.input_container}>
  <TextInput
    onChangeText={text => handleChange(text)}
    value={value.title}
    placeholder="enter book title"
  />
  <TextInput
    onChangeText={text => handleChange(text)}
    value={value.url}
    placeholder="link to book"
  />

  <TextInput
    onChangeText={text => handleChange(text)}
    value={value.description}
    placeholder="description"
  />
  <Button title="add" onPress={pressHandler} />
</View>;

неправильный обработчик

const handleChange = val => {
  setValue({
    value: {
      title: val,
      url: val,
      description: val,
    },
  });
};

Спасибо.

Answer 1

Вы можете использовать указание того, к какому виду ключа вы обращаетесь:

const handleChange = ({ type, text }) =>
  setValue((prev) => ({ ...prev, [type]: text }));

const [value, setValue] = useState({
  title: "",
  url: "",
  description: "",
});

<View style={styles.input_container}>
  <TextInput
    onChangeText={(text) => handleChange({ type: `title`, text })}
    value={value.title}
    placeholder="enter book title"
  />
  <TextInput
    onChangeText={(text) => handleChange({ type: `url`, text })}
    value={value.url}
    placeholder="link to book"
  />

  <TextInput
    onChangeText={(text) => handleChange({ type: `description`, text })}
    value={value.description}
    placeholder="description"
  />
  <Button title="add" onPress={pressHandler} />
</View>;

Answer 2

Если вы используете useState крючки, вы можете сделать это.

const [title, setTitle] = useState('');
const [url, setUrl] = useState('');
const [description, setDescription] = useState('');

<
View style = {
    styles.input_container
  } >
  <
  TextInput
onChangeText = {
  text => setTitle(text)
}
value = {
  value.title
}
placeholder = "enter book title" /
  >
  <
  TextInput
onChangeText = {
  text => setUrl(text)
}
value = {
  value.url
}
placeholder = "link to book" /
  >

  <
  TextInput
onChangeText = {
  text => setDescription(text)
}
value = {
  value.description
}
placeholder = "description" /
  >
  <
  Button title = "add"
onPress = {
  pressHandler
}
/> < /
View >