Estoy tratando de entender mejor mi estado de reacción y este es un excelente ejemplo si me preguntas.

Por dinámico quiero decir: renderizar la salida a continuación simultáneamente como se ingresó en el formulario.

class Demo extends Component { constructor(props) { super(props); this.state = { input: "", output: "", } } render() { const smallCaps = { 'a' : 'ᴀ', 'b' : 'ʙ', 'c' : 'ᴄ', 'd' : 'ᴅ', 'e' : 'ᴇ', 'f' : 'ғ', 'g' : 'ɢ', 'h' : 'ʜ', 'i' : 'ɪ', 'j' : 'ᴊ', 'k' : 'ᴋ', 'l' : 'ʟ', 'm' : 'ᴍ', 'n' : 'ɴ', 'o' : 'ᴏ', 'p' : 'ᴘ', 'q' : 'ǫ', 'r' : 'ʀ', 's' : 's', 't' : 'ᴛ', 'u' : 'ᴜ', 'v' : 'ᴠ', 'w' : 'ᴡ', 'x' : 'x', 'y' : 'ʏ', 'z' : 'ᴢ', }; function strtr(s, p, r) { return !!s {amp}amp;{amp}amp; { 2: function () { for (var i in p) { s = strtr(s, i, p[i]); } return s; }, 3: function () { return s.replace(RegExp(p, 'g'), r); }, 0: function () { return; } }[arguments.length](); } const input = 'this is a test' const style = smallCaps; let outputt = strtr(input, style); console.log(outputt); return ( {amp}lt;div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;Form style={{ width: 300 }} {amp}gt; {amp}lt;Form.Item{amp}gt; {amp}lt;Input id="input" placeholder="input text" /{amp}gt; {amp}lt;/Form.Item{amp}gt; {amp}lt;/Form{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;div{amp}gt; Style One: {amp}lt;div{amp}gt; {this.state.output} {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Si alguien puede señalarme en la dirección correcta, ¡lo agradecería enormemente!

Eventualmente, me gustaría poder mostrar varios estilos a la vez, pero primero quiero entender esto.

Cada vez que cambia su entrada, se activa una devolución de llamada onChange, donde puede obtener el valor del elemento para actualizar el estado:

 const smallCaps = { 'a' : 'ᴀ', 'b' : 'ʙ', 'c' : 'ᴄ', 'd' : 'ᴅ', 'e' : 'ᴇ', 'f' : 'ғ', 'g' : 'ɢ', 'h' : 'ʜ', 'i' : 'ɪ', 'j' : 'ᴊ', 'k' : 'ᴋ', 'l' : 'ʟ', 'm' : 'ᴍ', 'n' : 'ɴ', 'o' : 'ᴏ', 'p' : 'ᴘ', 'q' : 'ǫ', 'r' : 'ʀ', 's' : 's', 't' : 'ᴛ', 'u' : 'ᴜ', 'v' : 'ᴠ', 'w' : 'ᴡ', 'x' : 'x', 'y' : 'ʏ', 'z' : 'ᴢ', }; class Demo extends React.Component { constructor() { super(); this.state = { value: "", output: "" }; this.handleChange = this.handleChange.bind(this); } handleChange(event) { const text = (event.target.value); const changedText = strtr(text, smallCaps); this.setState({value: text, output: changedText}); } render() { return ({amp}lt;div{amp}gt; {amp}lt;h3{amp}gt;input:{amp}lt;/h3{amp}gt; {amp}lt;input type="text" value={this.state.value} onChange={this.handleChange} /{amp}gt; {amp}lt;p{amp}gt;{this.state.output}{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt;); } } React.render({amp}lt;Demo /{amp}gt;, document.getElementById('app')); function strtr(s, p, r) { return !!s {amp}amp;{amp}amp; { 2: function () { for (var i in p) { s = strtr(s, i, p[i]); } return s; }, 3: function () { return s.replace(RegExp(p, 'g'), r); }, 0: function () { return; } }[arguments.length](); }