Blancer.com Tutorials and projects

I have create an Angular element like below :

import { inject, Injector, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  entryComponents: [AppComponent],
})
export class AppModule {
  constructor(private _injector: Injector) {
    const element = createCustomElement(AppComponent, {
      injector: this._injector,
    });
    customElements.define('NewsWidget', element);
  }

  ngDoBootstrap() {}
}

And i am using the same in my react app by making below changes.

In index.html I have added script source as

  <script src="../../../../Angular/news-custom-element/news-dist/news-custom-element.js"></script>

Also , i have tried adding same path in App.tsx as

import './App.css';
import UploadButton from './Component/UploadButton';
import { GlobalContextProvider } from './Context/globalContext';
import MessageComponent from './Shared/Alert';
import '../../../../Angular/news-custom-element/news-dist/news-custom-element';

function App() {

  return (
    <GlobalContextProvider>
      <NewsWidget></NewsWidget>
      <UploadButton />
      <MessageComponent />
    </GlobalContextProvider>
  );
}

export default App;

But i am keep getting the error as

Any help would be appreciated here

For a calendar i require to generate an array of dates from 2023-01-01 till 2023-01-15. I’ve tried to generate the array using a loop-over, however I think the code could be much cleaner.

I would’ve expected javascript to have an getDateArray(new Date(), new Date('2023-01-15')) function but it doesn’t.

I’ve been trying to pass data from a child to a parent component in a few different ways and none of them seem to work, but I can’t figure out what I’m doing wrong.

Visitor Documents is the parent component. I have this logic in it:

const VisitorDocuments: FC<VisitorDocumentsProps> = ({ chatId }) => {
  const [uploadedDocuments, setUploadedDocuments] = useState([]);

  // const handleDocumentsUpdate = useCallback(
  //   (documents: any) => setUploadedDocuments(documents),
  //   [],
  // );

  const handleDocumentsUpdate = (documents: any) => {
    setUploadedDocuments(documents);
  };

  return (
    <>
      <AgentDocumentsFormProvider chatId={chatId}>
        <Accordion>
          <AccordionTab>
            <AgentDocumentsFormProvider chatId={chatId} allowUpload allowDelete>
              <DocumentsForm
                types={DocumentTypesUtils.INSURANCE_CARD}
                //setUploadedDocuments={setUploadedDocuments}
                onDocumentsUpdate={handleDocumentsUpdate}
              />
            </AgentDocumentsFormProvider>
          </AccordionTab>
        </Accordion>
      </AgentDocumentsFormProvider>
    </>
  );
};

I tried by just passing the setter and try to set the value I also try with handleDocumentsUpdate function, but the uploadedDocuments value is always an empty array.
And this is the child component and the things I tried to do in it:

    const DocumentsForm: FC<{
      types?: DocumentTypes[];
      setUploadedDocuments?: React.Dispatch<React.SetStateAction<any>>;
      onDocumentsUpdate?: (documents: any) => void;
    }> = ({ types = DEFAULT_TYPES, setUploadedDocuments, onDocumentsUpdate }) => {
      const { loading, documents } = useContext(DocumentsFormContext);
    
      // useEffect(() => {
      //   if (setUploadedDocuments) {
      //     setUploadedDocuments(documents);
      //   }
      // }, [documents, setUploadedDocuments]);
    
      useEffect(() => {
        onDocumentsUpdate?.(documents);
      }, [documents, onDocumentsUpdate]);
    .....

Apparently I’m updating things wrong or there’s another problem I’m not sure. In the child component I have values ​​for documents and I just want to pass them to the parent. I would be grateful if someone could help me urgently 🙂

How can i change button style inside JavaScript for bootstrap table?

`
$(document).ready(function() {
var table = $(‘#example’).DataTable();

new $.fn.dataTable.Buttons( table, {
    buttons: [
        {
            text: 'Button 1',
            action: function ( e, dt, node, conf ) {
              alert( 'Button activated' );
            }
        },
        {
            text: 'Button 2',
            action: function ( e, dt, node, conf ) {
              alert( 'Button activated' );
            }
        }
    ]
} );

table.buttons( 0, null ).container().prependTo(
    table.table().container()
);

} );
`

I have no idea at all how to styling that button. Thanks for your help

I have been running into an issue with my code, I would like to add a dropdown to the “Dashboard” section, however the items keep appearing next to the title instead of underneath it and the arrow icon that I inserted is not appearing to the right of the “Dashboard” title either.

I have tried doing the code shown down below, but that did not seem to fix the issue. I am unsure of what else to try as I am still learning my way around CSS/HTML and would like the sub items to be underneath the dashboard instead of to the side. Image of result attached.

HTML CODE

 <!-- menu items --> 
        <div class="menu-bar">
            <div class="menu">
                <ul class="menu-links">
                    <li class="nav-link">
                        <a href="#">
                            <i class='bx bx-home-alt icon' ></i>
                            <div class="item"><a href=" "> Dashboard </div> 
                        
                        <!--dropdown for dashboard-->
                        <!--dropdown arrow for dashboard-->
                        <i class="fas fa-angle-right dropdown"></i>
                        </a>
                        <div class="sub-menu">
                            <a href="" class="sub-item"> Sub Item 1 </a>
                            <a href="" class="sub-item"> Sub Item 2 </a>
                        </div>

                    </li>

CSS CODE

.sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 250px; /* 250px */
    padding: 10px 14px; /*  padding: 10px 14px; */ 
    background: var(--sidebar-color);
    transition: var(--tran-05);
    z-index: 100;  
}

/* dropdown code */
.item a .dropdown{
position: absolute;
right: 0;
margin: 20px;
transition: 0.3s ease;
}
.item .sub-menu{
background: #262627;
display: none;
}

image of result

I attempted to use another nestjs project I had, to act as a second source of data, and display the result on a React page. If I replace http://localhost:6000/products, with an actual live api service, it works.

What am I doing wrong / what am I missing? (I have attempted to solve via cors, currently both the 5000 and 6000 are set to *)

Why would this work with an actual website with JSON data, and not at my 6000/products endpoint with JSON data. Any/All help greatly appreciated (I thought this would be a 30 second thing, that has amounted in multiple hours and headbashing)

    import { useState, useEffect } from 'react';
    import axios from 'axios';
    import UserList from './components/UserList';
    import NavBar from './components/NavBar';

    function App() {
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('');
    const [price, setPrice] = useState('');
    const [users, setUsers] = useState([]);
    const [products, setProducts] = useState([]);

    useEffect(() => {
    async function proData() {
      const response = await fetch('http://localhost:9090');
      const data = await response.json();
      setUsers(data);
    }
    proData();
    async function loadData() {
      const response = await fetch('http://localhost:6000/products');
      const data = await response.json();
      setProducts(data);
    }
    loadData();
    }, []);

    const handleSubmit = (event) => {
    event.preventDefault();
    axios
      .post('http://localhost:6000/products', { title, description, price })
      .then((response) => setProducts([...products, response.data]))
      .catch((error) => console.error(error));
    };

    return (
    <div>
      <NavBar />
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={title}
          onChange={(event) => setTitle(event.target.value)}
        />
        <input
          type="text"
          value={description}
          onChange={(event) => setDescription(event.target.value)}
        />
        <input
          type="text"
          value={price}
          onChange={(event) => setPrice(event.target.value)}
        />
        <button type="submit">Create User</button>
      </form>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.id}, {user.name}, ({user.email},{user.phone})
          </li>
        ))}
      </ul>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.title}</li>
        ))}
      </ul>
      <UserList />
    </div>
      );
    }

    export default App;

Attempted to set additional local host for use in React app, via useEffect / useState. No matter what I try I cannot get it to load, though I can with actual live apis.

I could see the request hitting my other node services, triggering a console log of the data, so the request is being sent out and received and processed. It seems to be on the response / displaying end.

I know how it “should” work and I have looked for answers here and on google, but it seems specific.

1. Explaination

I am inserting invoice row values dynamically, but, for simplicity, i want to remove all the rows that have not been used.

I can already remove the rows, one by one, by clicking on a right side “remove” button.

2. Question

How can i remove all the empty rows on submit/save button click?

3. The html table code

                <div asp-validation-summary="ModelOnly" class="text-danger"></div>

                <div class="row">
                    <div class="col-md-8 border-0">
                        <table id="table1" border="0">
                            <thead>
                                <tr style="font-size:80%;">
                                    <th >Product</th>
                                    <th >Qty</th>
                                    <th >Price</th>
                                    <th >Sum</th>                                        
                                    <th class="d-print-none">...</th>
                                </tr>
                            </thead>

                            <tbody>
                                @for (int i = 0; i < Model.InvList.Count(); i++)
                                {
                                    <tr class="border-bottom">
                                                                                
                                        <td>
                                            <select asp-for="@Model.InvList[@i].ProdId" class="form-control Product" 
                                            name="InvList[@i].ProdId" onchange="setTotal()" data-val="true" data-val-required="Value can not be null.">
                                                <option value="" selected>--- Product ---</option>
                                                @foreach (var item in Model.SHRL)
                                                {
                                                    <option value="@item.ProdId"
                                                            qty="@Convert.ToInt32(item.Qty)"
                                                            [email protected](item.Price)"
                                                            sum="@Convert.ToInt32(item.Sum)">
                                                        @item.ProdName
                                                    </option>
                                                }
                                            </select>
                                            <span asp-validation-for="@Model.InvList[@i].ProdId" class="text-danger"></span>
                                        </td>
                                        <td>
                                            <input asp-for="@Model.InvList[@i].Qty" class="form-control qty" style="font-size:80%;" />
                                            <span asp-validation-for="@Model.InvList[@i].Qty" class="text-danger"></span>
                                        </td>
                                        <td>
                                            <input asp-for="@Model.InvList[@i].Price" class="form-control price" type="number" style="font-size:80%;" />
                                            <span asp-validation-for="@Model.InvList[@i].Price" class="text-danger"></span>
                                        </td>
                                        <td>
                                            <input asp-for="@Model.InvList[@i].Sum" class="form-control sum" type="number" style="font-size:80%;" />
                                            <span asp-validation-for="@Model.InvList[@i].Sum" class="text-danger"></span>
                                        </td>
                                        
                                        <td>
                                            <input class="form-control btn btn-sm btn-danger font-weight-bold" type="button" value="X" onclick="ob_adRows.delRow(this);setTotal();" style="max-width:80px;" />
                                        </td>
                                    </tr>
                                }                                   
                            </tbody>

                            <tfoot>
                                <tr style="font-size:80%;">
                                    
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary save2">
                                            Save
                                        </button>
                                    </td>                                       
                                    <td>
                                    
                                    </td>
                                    <td>
                                       
                                    </td>
                                    <td></td>
                               <td></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                 
                </div>
            </form>

4. The javascript used to remove the rows one by one

        function adRowsTable(id) {
            var table = document.getElementById(id);
            var me = this;
            if (document.getElementById(id)) {
                var row1 = table.rows[1].outerHTML;
   
                function setIds() {
                    var tbl_id = document.querySelectorAll('#' + id + ' .tbl_id');
                    for (var i = 0; i < tbl_id.length; i++) tbl_id[i].innerHTML = i + 1;
                }
   
                me.addRow = function (btn) {
                    btn ? btn.parentNode.parentNode.insertAdjacentHTML('afterend', row1) : table.insertAdjacentHTML('beforeend', row1);
                    setIds();
                }
   
                me.delRow = function (btn) {
                    btn.parentNode.parentNode.outerHTML = '';
                    setIds();
                }
            }
        }
   
        var ob_adRows = new adRowsTable('table1');
   

I try to send a message from user which subscribe on a specific chat using STOMP
and save the message to my database but it fail without give me any idication of error to solve it but after many tries I have been found that the message send not back to me to save it in my db. as shown blow

WebSocketConfig class

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").setAllowedOriginPatterns("*").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/app")
                .enableSimpleBroker("/topic");
    }

}

websockt.js connectToChat function

function connectToChat(userId) {
    console.log("connecting to chat...")
    let socket = new SockJS(url + '/ws');
    // let socket=new WebSocket("wss://localhost:8080/ws")
    stompClient = Stomp.over(socket);
    stompClient.connect({"X-Authorization":"Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJVQmppQkZXYmM4NnpBaER0M1QtTUJ6cnl3R3FnYkF5QlFxYjRjN0w3VHpNIn0.eyJleHAiOjE2MzE1ODc4NzksImlhdCI6MTYzMDM3ODI3OSwianRpIjoiODAyZGQyYzAtNjlhYi00Yjk2LTllZjgtODA5YWY3MWJmNmFmIiwiaXNzIjoiaHR0cHM6Ly9rZXljbG9hay1kZXYuZ2l0c29sdXRpb25zLmlkL2F1dGgvcmVhbG1zL2dpdCIsImF1ZCI6Wy"}, function (frame) {
        console.log("connected to: " + frame);


        stompClient.subscribe("/topic/messages/"+userId, function (response) {
            let data = JSON.parse(response.body);
            // console.log("selectedUserOrGrup = "+selectedUserOrGrup)
            // console.log("data.fromLogin = "+data.fromLogin)
            if (selectedUserOrGrup == data.userId) {
                console.log("selectedUserOrGrup === data.fromLogin")

                let messageTemplateHTML = "";
                messageTemplateHTML = messageTemplateHTML + '<div id="child_message" class="d-flex justify-content-end mb-4">'+
                    '<div id="child_message" class="msg_cotainer_send">'+data.message+
                    '</div>'+
                    '</div>';
                $('#formMessageBody').append(messageTemplateHTML);
                console.log("append success")
            } else {
                // console.log("data.group_id "+data.group_id)
                newMessages.set(data.userId, data.message);
                $('#userNameAppender_' + data.userId).append('<span id="newMessage_' + data.userId + '" style="color: red">+1</span>');

                console.log("kebuat")
                let messageTemplateHTML = "";
                messageTemplateHTML = messageTemplateHTML + '<div id="child_message" class="d-flex justify-content-end mb-4">'+
                    '<div class="msg_cotainer_send">'+data.message+
                    '</div>'+
                    '</div>';
                $('#formMessageBody').append(messageTemplateHTML);
                console.log("append success")
            }
        },{});


        $.get(url + "/chats/user/"+userId, function (response) {
            let chats = response;
            for (let i = 0; i < chats.length; i++) {
                // console.log(groups[i]['name'])
                stompClient.subscribe("/topic/messages/chat/" + chats[i]["id"], function (response) {
                    let data = JSON.parse(response.body);
                    console.log("selectedUserOrGrup = "+selectedUserOrGrup)
                    console.log("data.group_id = "+data.chatId)
                    console.log("------------------------------------ : masuk get message group")
                    if (selectedUserOrGrup == data.chatId) {
                        console.log("selectedUserOrGrup === data.fromLogin")

                        let messageTemplateHTML = "";
                        messageTemplateHTML = messageTemplateHTML + '<div id="child_message" class="d-flex justify-content-end mb-4">'+
                            '<div id="child_message" class="msg_cotainer_send">'+data.message+
                            '</div>'+
                            '</div>';
                        $('#formMessageBody').append(messageTemplateHTML);
                        console.log("append success")
                    } else {
                        newMessages.set(data.chatId, data.message);
                        $('#userGroupAppender_' + data.chatId).append('<span id="newMessage_' + data.groupId + '" style="color: red">+1</span>');

                        console.log("kebuat")
                        let messageTemplateHTML = "";
                        messageTemplateHTML = messageTemplateHTML + '<div id="child_message" class="d-flex justify-content-end mb-4">'+
                            '<div class="msg_cotainer_send">'+data.message+
                            '</div>'+
                            '</div>';
                        console.log("append success")
                    }
                })
            }
        });
    },onError);
}

on original project when send message the console print this
enter image description here

But on my project when I send message the console only print >>> Send only as show so why?
enter image description here

Finally Hope you help me to solve this issue if you can
Thanks

I try to send message from user to chat which subscribed to it, so save it in my db and send it to all users in the same chat.

I want the select field to display empty if there is no value taken after the id or xml value if not empty.
Jquery now shows last option or xml value if not empty.

$(document).ready(function (e) {

  var Profiles1 = document.getElementById("value1");
  var CurrentValue1 = Profiles1.innerHTML;


  var options = [
    " ",
    "001",
    "002",
    "003",
    "004",
  ];

  $("#Profiles_value1").empty();
  $.each(options, function (i, p) {
    $("#Profiles_value1").append($("<option></option>").val(p).html(p));
    $("#Profiles_value1 option:contains('" + ProfilesCurrentValue1 + "')")
      .attr("selected", "selected"); 
  });
});

<table  style="padding-left:10;  margin-bottom:1;">
   <tr>
     <th align="Left" nowrap="true" style="padding:2; ">
        <span class="StandardLabel">Kalibracja:</span>
     </th>
        <td  align="Left" nowrap="false" style="padding:2 2 2 2 ;">
            <span id="">
               <xsl:for-each select="JobSpec">
                   <xsl:for-each select="JobCalibration">
                      <select  id="Profiles_value1" class="PlatesDiv_Enabled_SelectInput">
                         <xsl:apply-templates/>
                      </select>
                   </xsl:for-each>
                </xsl:for-each>
           </span>
        </td>
   </tr>
</table>

I want the select field to display empty if there is no value taken after the id or xml value if not empty.

I have some code that renders Pytest test run results as an HTML page. I’m somewhat satisfied with it for now, except I’d like to make the top “navbar” sticky (it’s actually made up of buttons). Maybe I’m calling for help too earl, but I’ve been looking at it for some time, and I just kind of need something that’s working witin the constraints of my existing code before I eventually go back and refactor it all. Can anyone take a look and hopefully see how I can achieve this, without compromising the other areas of the code?

I had gotten something working before, but it trashed the functionality of the other content, so I backed it out.

I can’t post all the code because it’s too large, but SO wants me to post somteihng that looks like code, so here we have it before the link to the JS Fiddle down below.

for _ in range(10):
    print(_)

Disclaimer: I’m a total hack at front end coding. I know there are probably all sorts of violations in my code that will make real front end devs shudder – but here it is anyway:

https://jsfiddle.net/JavaJeff13/bgh72jw5/7/

P.S. Yes I am aware that Pytest-HTML already does something very similar. 🙂

The Problem:

The code bellow throws a Unhandled Runtime Error Error: Magic RPC Error: [-32603] Internal error: Unsupported Magic Connect method and I cannot figure out why.

node version : 18.12.1
magic-sdk version: ^8.1.1

import { Magic } from 'magic-sdk';

const magic = new Magic(process.env.NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY);

try {

        magic.auth.loginWithMagicLink({ email });
    
        const didToken = await magic.auth.loginWithMagicLink({
                    email,
                });
                console.log({ didToken });
                
            }
        } catch (error) {
            console.log(error);
    
        }

I have tried downgrading the magic-sdk version to 8.1.1 with node version to 18.12.1 but the problem still persists

The expected behavior is for the code to send a magic link to the users email and the user should use that magic link to login into the application

Scenario

I have an browser based local intranet app that is thrusted by users.

I need a file selector dialog, where I can read full local path of the selected file, which violates browser sandbox. Basically, user needs to point to existing file in mapped network drive, instead of uploading local file to server (for legacy reasons)

Users are allowed to install a small plugin or browser extension, install the app as PWA in order to gain additional permissions, accept some additional permission requested by browsers etc.

The only requirement is, that it must work on Windows and Chromium based browsers.

Question

How can I implement a “File Selector” dialog where I can read selected file’s full path?

I have two array as follows :

data = [
{
 "is_new":1,
 "is_delayed":0,
 "is_active":1,
 "name":"london"
},
{
 "is_new":1,
 "is_delayed":1,
 "is_active":0,
 "name":"paris"
},
{
 "is_new":1,
 "is_delayed":0,
 "is_active":1,
 "name":"India"
}
]

secondArray = ["is_new","is_delayed","is_active"] -- this array can have one element, two element or three elements at runtime

I want to filter data array such that whatever values matches in second array should have value 1 in that element of data array. For example in second array if three elements i.e
“is_new”,”is_delayed”,”is_active” are present, then I want to check for first element in data array for any of these value is 1, then add that element in
a result array. How can I do that?

I am using a package called @supercharge/promise-pool in NodeJS to do some concurrency tasks:

import { PromisePool } from '@supercharge/promise-pool';

... other code ...


    await PromisePool.for(res[folder].filePaths)
      .withConcurrency(10)
      .process(async (item: any) => {
        const { fileFullPath: fileFullPath, name: name }: any = item;
        try {
          // TODO:  If there are 10 files larger than 200MB parallelling at same time, the memory usage will be over 2GB;
          const filedata = await fs.promises.readFile(fileFullPath);
          const byteArray = new Uint8Array(filedata);
          const dicomDataSet = dicomParser.parseDicom(byteArray);

          // ... do some business logic

        } catch (error) {
          logger.warn(error);
        }
      });

Now, the concurrency number is fixed at 10. And this step:

const filedata = await fs.promises.readFile(fileFullPath);

will load the data from disk into memory.

If there are 10 files larger than 200MB being processed concurrently, the memory used at peak will be over 2GB in the worst case scenario.

I am deploying the above code in a server node with only 2GB memory. This will crash the node.

In nodejs, is there a way to dynamically control the number of concurrent tasks based on available memory?

For example, incrementally adding more concurrent tasks when the memory available is more than the size of the file that will be read ?

Or are there any other packages that is capable of it?

i have this code

import MuiDialog from "@mui/material/Dialog";
import { styled } from "@mui/material/styles";
const TheDialog = styled((DialogProps) => (
  <MuiDialog  {...DialogProps} />
))(({ theme }) => ({
 "& .css-tlc64q-MuiPaper-root-MuiDialog-paper": {
 
       background: "linear-gradient(90deg, rgb(142, 31, 195) 0%, rgb(6, 111, 197) 100%)",
       color:"white"
  },
  "& .css-tlc64q-MuiPaper-root-MuiDialog-paper *": {
   
       color:"white"
  },
  "& .css-tlc64q-MuiPaper-root-MuiDialog-paper button *": {
    
      
       color:"black"
  },
   "& .css-tlc64q-MuiPaper-root-MuiDialog-paper button": {
  
      
      alignItems: "center",
      background: "#FFFFFF",
      border: "1px solid rgba(0, 0, 0, 0.1)",
      borderRadius: ".25rem",
      boxShadow: "rgba(0, 0, 0, 0.02) 0 1px 3px 0",
      boxSizing: "border-box",
      color: "rgba(0, 0, 0, 0.85)",
      cursor: "pointer",
      fontFamily: "system-ui,-apple-system,system-ui,Helvetica Neue,Helvetica,Arial,sans-serif",
      fontSize: "13px",
      fontWeight: "600",
      textDecoration: "none",
      transition: "all 250ms",
      userSelect: "none",
      webkitUserSelect: "none",
      touchAction: "manipulation",
  },
   "& .css-tlc64q-MuiPaper-root-MuiDialog-paper button:hover": {
  
      
       transform: "translateY(-1px)"
  },
  "& .css-tlc64q-MuiPaper-root-MuiDialog-paper button:focus": {
   
      
      borderColor: "rgba(0, 0, 0, 0.15)",
      boxShadow: "rgba(0, 0, 0, 0.1) 0 4px 12px",
      color: "rgba(0, 0, 0, 0.65)"
  },
   "& .css-tlc64q-MuiPaper-root-MuiDialog-paper button:active": {
   
      
      backgroundColor: "#F0F0F1",
      borderColor: "rgba(0, 0, 0, 0.15)",
      boxShadow: "rgba(0, 0, 0, 0.06) 0 2px 4px",
      color: "rgba(0, 0, 0, 0.65)",
      transform: "translateY(0)"
  },


  
}));
function Dialog({handleClose,open,children}){

  return( <TheDialog
    onClose={handleClose}
    fullWidth={true}
    maxWidth={"sm"}
    open={open}
  >
      {children}
  </TheDialog>)
 
}

function App() {
  const textAreaRef = React.useRef(null);

  const handleClick = () => {
    console.log(textAreaRef.current.value);
  };

  return (
    <div className="App"
       open={true}
       handleClose={()=>{}}
       title="My Dialog">
      <Dialog title="My Dialog">
        <textarea ref={textAreaRef} rows="3" placeholder="Enter text here" />
        <button onClick={handleClick}>Click me</button>
      </Dialog>
    </div>
  );
}

export default App;

For some reason the ref gives me null.

It doesn’t give me null if I put the text area outside Dialog like so:

function App() {
  const textAreaRef = React.useRef(null);

  const handleClick = () => {
    console.log(textAreaRef.current.value);
  };

  return (
    <div className="App">
      <textarea ref={textAreaRef} rows="3" placeholder="Enter text here" />
      <Dialog
       open={true}
       handleClose={()=>{}}
       title="My Dialog">
        <button onClick={handleClick}>Click me</button>
      </Dialog>
    </div>
  );
}

so I’m pretty sure the error has something to do with passing refs, although I don’t know how to use it with a custom component that has opening and closing tags

I searched the internet and even tried chatgpt and couldn’t find an answer so yall are my last resort lol

Thanks!!