El error que todos cometen al pasar value
¿Te ha pasado que al enviar datos a un componente de Facebook, el valor llega como undefined? Aquí está el punto clave: el prop value no es un mero placeholder, es la columna vertebral del estado interno. Cuando lo omites, el componente se vuelve un fantasma.
¿Por qué falla?
Primero, la desincronización. Si usas setState y al mismo tiempo intentas leer this.props.value, estás atrapado en un bucle sin salida. Segundo, la tipología. React espera un string o número, no un objeto arbitrario. Si le lanzas un JSON, el render se colapsa.
La regla de oro del value
Mira: siempre inicializa el prop con un valor por defecto. No dejes nada al azar. defaultProps es tu escudo contra el caos. Además, controla el tipo con PropTypes. Un error de tipo es como una bomba de tiempo.
Cómo pasar el value sin drama
Ejemplo rápido: <MyComponent value={this.state.input} />. Pero ojo, si this.state.input es null, el componente se vuelve inestable. Solución: value={this.state.input || »}. Así garantizas siempre una cadena.
Trucos de depuración
Abre la consola, escribe console.log(this.props.value). Si ves undefined, el problema está antes del render. Revisa la cadena de props: padre → hijo. Cada eslabón debe transmitir el valor sin alteraciones.
El caso de los value en los props de FB
En los componentes de Facebook, el value controla la UI del input. Si lo cambias a mano, el componente ignora el teclado. Resultado: el usuario no puede escribir. La solución es simple: deja que el componente sea el único dueño del estado o sincroniza con onChange.
Acción inmediata
Revisa tu código, agrega defaultProps, valida con PropTypes y nunca, nunca pases null sin fallback. Cambia eso ahora y verás el flujo volver a la normalidad.