Wie Namen für eine Checkbox setzen in reagieren jsx

Question

Ich versuche, den Namen in einem Checkbox Eingang einzustellen, aber es scheint es nicht funktioniert:

const DepartmentRow = ({ data }) => 
<tbody> 
    <tr> 
    <td><input type="checkbox" name="ListOfDepartments" value={data.department}/> 
     <span>{data.departament}</span> 
    </td> 
    </tr> 
</tbody>; 

DepartmentRow.propTypes = { 
    data: PropTypes.object 
}; 

In Daten, die ich ein Benutzerobjekt erhalten, hat eine Abteilung. Wenn ich schreibe:

<td>{data.department}</td> 

es funktioniert und es zeigt den Namen der Abteilung, damit ich die richtigen Informationen über Daten erhalten.

Dies ist, was ich im Moment habe: diese

Und ich will:

Vielen Dank!

Answer 1

Sieht so aus, als würde Ihr Eingabe-Div den ganzen Platz einnehmen. Versuchen Sie, ein einzelnes div mit display:inline-block zu verwenden und beide input und span darin zu setzen.

Answer 2

Sie könnten einen Tippfehler in Ihrem Code haben, haben Sie versucht, data.department anstelle von data.departament aufzurufen?

Die folgenden Werke für mich

const DepartmentRow =() => { 
    const data = { 
     department: 'Production', 
    } 
    return(
     <tbody> 
      <tr> 
       <td><input type="checkbox" name="ListOfDepartments" value={data.department}/> 
       <span>{data.department}</span> 
       </td> 
      </tr> 
     </tbody> 
    ) 
}