}} <Box overflow="auto" m="5"> {[...messages] .sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp)) .map(m => ( <Text fontSize="xs" key={m.id} <div ref={chatRef} /> </Box> <Box overflow="auto" p="5" <Text fontSize="m" key={u.socket}> {u.username} </Text> <Input placeholder="Write message..." value={message} onChange={e => setMessage(e.target.value)} ></Input> <Button variantColor="green" type="submit" disabled={!message}> Send </Button>
}} <Box overflow="auto" m="5"> {[...messages] .sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp)) .map(m => ( <Text fontSize="xs" key={m.id} <div ref={chatRef} /> </Box> <Box overflow="auto" p="5" <Text fontSize="m" key={u.socket}> {u.username} </Text> <Input placeholder="Write message..." value={message} onChange={e => setMessage(e.target.value)} ></Input> <Button variantColor="green" type="submit" disabled={!message}> Send </Button>