Next.js Discord

Discord Forum

Putting JSX into Input

Unanswered
Blue Picardy Spaniel posted this in #help-forum
Open in Discord
Blue Picardy SpanielOP
How do I put react into an input? For example, when a user inputs a user ID, I want to change that into a badge icon and put the user's username

16 Replies

Genio
You can use usestate and then on input change
or if its a form, put the setState insidethe handelButton
Blue Picardy SpanielOP
but when i put a react component as the value of an input, it errors
Genio
Can you show me the code
Blue Picardy SpanielOP
<div className="grid grid-cols-4 items-center gap-4">
   <Label htmlFor="id" className="text-right">User ID</Label>

   <Input id="id" value={<Badge variant="outline">
   <Image src={`https://cdn.discordapp.com/avatars/${offender.id}/${offender.avatar}.png`} height={25} width={25} className="rounded-full" alt="avatar" />
   <span className="text-sm pl-2">@{offender.username}</span>
   </Badge>} />
</div>
Genio
You cannot put a JSX inside a value
Do this instead
const badgeThing = () => {
    const [badge, setBadge] = useState(0);

    return (
        <div className='grid grid-cols-4 items-center gap-4'>
            <Label htmlFor='id' className='text-right'>
                User ID
            </Label>

            <Input
                id='id'
                onChange={e => {
                    setBadge(e.target.value);
                }}
            />

            {badge > 0 && (
                <Badge variant='outline'>
                    <Image
                        src={`https://cdn.discordapp.com/avatars/${offender.id}/${offender.avatar}.png`}
                        height={25}
                        width={25}
                        className='rounded-full'
                        alt='avatar'
                    />
                    <span className='pl-2 text-sm'>
                        @{offender.username}
                    </span>
                </Badge>
            )}
        </div>
    );
};
im exporting my table columns which is just an array
do i really need state?
@Blue Picardy Spaniel do i really need state?
Genio
Unfortunately without the code to know exactly what you mean i cant really give an answer
but If you want the user to input, yes
@Genio Unfortunately without the code to know exactly what you mean i cant really give an answer
Blue Picardy SpanielOP
const TableColumns: ColumnDef<GlobalBan>[] = [
  {
    id: "actions",
    cell: ({ row }) => {
      const globalBan = row.original;

      function saveGlobalBan(e) {
        console.log(e);
      }

      return (
        <Dialog>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="h-8 w-8 p-0">
                <span className="sr-only">Actions menu</span>
                <MoreHorizontal className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DialogTrigger asChild>
                <DropdownMenuItem className="cursor-pointer">
                  <Edit2 size={17} className="mr-2" />
                  Edit Global Ban
                </DropdownMenuItem>
              </DialogTrigger>
              <DropdownMenuItem className="cursor-pointer" onClick={() => navigator.clipboard.writeText(globalBan.id)}>
                <Copy size={17} className="mr-2" />
                Copy Offender ID
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
          <DialogContent className="sm:max-w-[425px]">
            <DialogHeader>
              <DialogTitle>Edit Global Ban</DialogTitle>
              <DialogDescription>You are currently editing the global ban for <span className="text-primary">@{globalBan.offender.username}</span></DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4">
              {/* User ID */}
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="id" className="text-right">User ID</Label>
                <Input id="id" defaultValue={globalBan.offender.id} disabled={true} className="col-span-3" />
              </div>
            </div>
            <DialogFooter>
              <form action={saveGlobalBan}>
                <Button type="submit">Save Changes</Button>
              </form>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      );
    }
  }
];
as you can see this isn't a react component
Blue Picardy SpanielOP
@Genio