Estoy creando una aplicación de reacción que toma la entrada de texto y la genera en objetos de 280 caracteres (del tamaño de un tweet), esencialmente dividiéndola en un gran hilo de Twitter.
No sé cómo dividirlos en estos objetos de 280 caracteres y seguir actualizando la lista de objetos (tweets) mientras escribo en el cuadro de texto.
Cualquier ayuda sería apreciada.
const [content, setContent] = useState(""); const [tweets, setTweets] = useState([ { text: "First tweet.", id: 1 }, ]); let remainder = content.length - ~~(content.length / 10) * 10; let prevTweetsLength = content.length - remainder; const contentHandler = (e) => { setContent(e.target.value); tweetHandler(content); console.log(content); }; const tweetHandler = (c) => { tweets[prevTweetsLength / 10] = { text: c, id: tweets.length + 1, }; if (remainder === 1) { setTweets([ ...tweets, { text: c.substring((prevTweetsLength)), id: Math.random() * 1000, }, ]); } };```Primero, podemos definir una función que dividirá un texto en tweets, usando slice(start, end) que devuelve el contenido entre la posición de inicio y la posición final.
function splitIntoTweets(content, tweetLength = 280) { const nTweets = content.length / tweetLength; const tweets = []; for (let i = 0; i < nTweets; i++) { tweets.push({ text: content.slice(i * tweetLength, (i + 1) * tweetLength), id: i, }); } return tweets; }Luego, dentro de sus componentes, podría hacer:
const [content, setContent] = useState(""); const [tweets, setTweets] = useState([]); // Every time content changes, we update the list of tweets. useEffect(() => { setTweets(splitIntoTweets(content)); }, [content]) // Rest of your code ...