Handling multiple number type inputs - reactjs

Question

I have several number type inputs in one page view. If I enter a number in one input, the value of all inputs changes. I only have one value in state, to which I assign the variable from input. How to control only the input that the target is on?
Parent:
class App extends Component {
state = {
starships: [],
value: 0,
quantity: 0,
};
handleInputChange = (e) => {
this.setState({
value: e.target.value,
});
};
render() {
const { starships, value, quantity } = this.state;
return (
<>
<Header quantity={quantity} />
<StarshipsList
starships={starships}
value={value}
quantity={quantity}
onChange={this.handleInputChange}
onClick={this.handleAddBtn}
/>
</>
);
}
}
Child's child:
function Starship(props) {
return (
<tbody>
{props.starships.map(({ url, name, manufacturer, cost_in_credits }) => (
<tr key={url}>
<td>{name}</td>
<td>{manufacturer}</td>
<td>{cost_in_credits}</td>
<td>
<input
onChange={props.onChange}
value={props.value}
className="input"
type="number"
min="0"
/>
<button onClick={props.onClick} className="add-btn">
Add
</button>
</td>
</tr>
))}
</tbody>
);
}

Answer 1

You need to create a component (TrComponent) to render the tr tag and child.
In TrComponent, you create a state call value and handle change to update this state
To handle onClick in TrComponent, you can update like: onClick={() => props.onClick(values_you_want)}

Answer 2

First of all change value state to object
state = {
starships: [],
value: {},
quantity: 0,
};
Now change handleInputChange function to accept value and key
handleInputChange = (key, value) => {
this.setState({
value[key]: value,
});
};
Now in Starship component we will call onChange method with url as key and e.target.value as value:
<input
onChange={(e) => props.onChange(url, e.target.value)}
value={props.value[url]}
className="input"
type="number"
min="0"
/>