Как мы можем добавить ''+'' два разных значения в реакцию jsx

Используйте число, чтобы не устанавливать цену в виде строки:

function app(){
const [price,setPrice]=useState(0);
return(
<div>
  <label>Price</label>
  <input
  type='number'
  value = {price}
  onChange = {(e)=> setPrice(Number(e.target.value))}
 </div>
  {price + (10/100)*price}
/>
}

Однако остерегайтесь NaN.

Все, что вам нужно сделать, это добавить знак плюс + перед e.target.value, чтобы преобразовать его в число:

function app() {
  const [price, setPrice] = useState(0);
  return (
    <div>
      <label>Price</label>
      <input type = "number" value = {price} onChange = {(e) => setPrice(+e.target.value)} />
      {price + (10 / 100) * price}
    </div>
  );
}

Вы можете использовать parseInt для преобразования строки в число в JavaScript. Проблема в вашем скрипте, вы добавляете 2 строки значений и число.

function app() {
  const [price, setPrice] = useState(0);
  return (
    <div>
      <label>Price</label>
      <input
        type = "number"
        value = {price}
        onChange = {e => setPrice(e.target.value)}
      />
      <div>{(parseInt(price) + (10 / 100)) * parseInt(price)}</div>
    </div>
  );
}