Estoy tratando de crear un botón que muestre un ícono y un mensaje diferentes cuando se haga clic en él. Sin embargo, no estoy seguro de cómo incluir el ícono dentro de la declaración 'si entonces' dentro del elemento < button > . Soy bastante nuevo en React.

Mi código está a continuación:

 import React, { setState, useState, useEffect } from "react"; import { Pause, Play } from 'react-feather'; function AudioPlayer() { // use Audio constructor to create HTMLAudioElement const audioTune = new Audio("<YOUR_AUDIO_FILE_PATH.mp3>"); // variable to play audio in loop const [playInLoop, setPlayInLoop] = useState(false); // variable to play audio in loop const [isPlay, isPlaying] = useState(0); // load audio file on component load useEffect(() => { audioTune.load(); }, []); // play audio sound const playSound = () => { audioTune.play(); isPlaying(1); }; // pause audio sound const pauseSound = () => { audioTune.pause(); }; // stop audio sound const stopSound = () => { audioTune.pause(); audioTune.currentTime = 0; isPlaying(0); }; const handlePlaying = () => { if (isPlay) { stopSound(); } else { playSound(); } }; return ( <div> <div className="App"> <button onClick={handlePlaying}> {isPlay ? <Pause /> "pause" : <Play/> "listen to this page"} </button> </div> </div> ); } export default AudioPlayer;

Recibo un error aquí {isPlay ? <Pause /> "pause" : <Play/> "listen to this page"}

el error es:

 SyntaxError /src/components/Audio2.js: Unexpected token, expected ":" (57:30)

Intenté insertar el ícono dentro de las marcas "", pero eso solo muestra el código del botón como una cadena.

Gracias por tu ayuda