Reaccionar js material de ui valor inicial igual a ""

Pablo :

Tengo un campo de selección, con los temas, los temas son por ejemplo los siguientes:

• Nombre -> etiqueta

---

1. "" -> /
2. "logs" -> / logs
3. "Exec" -> / exec

Me gustaría hacer seguro de comenzar el tema como un valor con el nombre igual a "" y la etiqueta "/", que es el primero de ellos, son valores que tomo desde el PP lo que no puede hacer cambios .

¿Me puedes ayudar?

Enlace: codesandbox

Código:

import React from "react";
import "./styles.css";
import { TextField, MenuItem } from "@material-ui/core";

export default function App() {
  const [state, setState] = React.useState({
    pubtopic: "",
    subscriptions: [
      {
        name: "",
        label: "/"
      },
      {
        name: "exec",
        label: "/exec"
      },
      {
        name: "log",
        label: "/log"
      }
    ]
  });

  const { pubtopic, subscriptions } = state;

  const onChange = name => ({ target: { value } }) => {
    setState(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <div className="App">
      <TextField
        id="pubtopic"
        select
        label="Topic"
        placeholder="Topic"
        variant="outlined"
        value={pubtopic}
        onChange={onChange("pubtopic")}
        size="small"
        fullWidth
      >
        {subscriptions.map((el, key) => (
          <MenuItem key={key} value={el.name}>
            {el.label}
          </MenuItem>
        ))}
      </TextField>
      pubtopic: {pubtopic}
    </div>
  );
}

Ryan Cogswell:

Se necesitan dos adiciones para que esto funcione decentemente:

• Es necesario establecer la Selección de puntal displayEmpty a truefin de que se tratará a un valor de cadena vacía como algo que aún debe tratar de mostrar en lugar de tratarla como lo que significa que no hay nada seleccionado.
• Es necesario configurar el puntal InputLabel shrink a true, de modo que incluso cuando el valor actual del TextFieldes una cadena vacía que todavía se moverá la etiqueta hacia arriba en lugar de presentar sobre la parte superior de la opción "/".

A continuación se muestra un ejemplo de trabajo en función de su caja de arena:

import React from "react";
import "./styles.css";
import { TextField, MenuItem } from "@material-ui/core";

export default function App() {
  const [state, setState] = React.useState({
    pubtopic: "",
    subscriptions: [
      {
        name: "",
        label: "/"
      },
      {
        name: "exec",
        label: "/exec"
      },
      {
        name: "log",
        label: "/log"
      }
    ]
  });

  const { pubtopic, subscriptions } = state;

  const onChange = name => ({ target: { value } }) => {
    setState(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <div className="App">
      <TextField
        id="pubtopic"
        select
        label="Topic"
        variant="outlined"
        value={pubtopic}
        onChange={onChange("pubtopic")}
        size="small"
        fullWidth
        SelectProps={{ displayEmpty: true }}
        InputLabelProps={{ shrink: true }}
      >
        {subscriptions.map((el, key) => (
          <MenuItem key={key} value={el.name}>
            {el.label}
          </MenuItem>
        ))}
      </TextField>
      pubtopic: {pubtopic}
    </div>
  );
}