If statement & PopUp window in React

[mathmari]

Hey!

I have a checkbox with radio button and I want that a popup message is shown if we have selected the second option. I tried to do that with if statement but it doesn't work. How do we write the if statement in React? Isn't it 'condition ? true : false' ? Do we not check if the value or the id is the one of the correct option?
And also how is the popup message defined?

The part for the radio buttons that I used is :

<input type="radio" id="No" value="No" name="answer" /> No
<input
     type="radio"
     id="Yes"
     value="Yes"
     name="answer"
     style={{
              marginLeft: '55%'
     }}
/>
Yes

I want that if we select the answer 'Yes' then a pop up message should appear.

As for the pop up I tried:

<Popup trigger={<button> Trigger</button>} position="right center">
              <div>Popup content here !</div>
</Popup>

But this just makes visible or invisible respectively the part in <div>. How does a pop up window appear?

 

[mathmari]

I wrote now the following :

<input type="radio" id="No" value="No" name="answer" /> No
      <Popup
         trigger={
            <label>
              <input
                  type="radio"
                  id="Yes"
                  value="Yes"
                  name="answer"
                  style={{
                      marginLeft: '55%'
                  }}
               />
               Yes
            </label>
        }
        position="right center"
     >
        <div>
           <h3>Why</h3>
               <label>
                  <input type="radio" value="reason1" name="reason" />Reason1
                  <br></br>
                  <input type="radio" value="reason2" name="settings" /> Reason2
               </label>
       </div>

Now I get a popup of the form :

Could we style it do get a popup of the form :

?

 

[pbuk]

Could we style it do get a popup of the form :

No, that's not a popup, it's a (modal) Dialog: https://mui.com/material-ui/react-dialog/

Different animal.

 

[mathmari]

No, that's not a popular, it's a (modal) Dialog: https://mui.com/material-ui/react-dialog/

Different animal.

I have already tried the version of the link you sent but I get an error message that it must be typescript instead of javascript.

 

[mathmari]

<input type="radio" id="No" value="No" name="answer" /> No
      <Popup
         trigger={
            <label>
              <input
                  type="radio"
                  id="Yes"
                  value="Yes"
                  name="answer"
                  style={{
                      marginLeft: '55%'
                  }}
               />
               Yes
            </label>
        }
        position="right center"
     >
        <div>
           <h3>Why</h3>
               <label>
                  <input type="radio" value="reason1" name="reason" />Reason1
                  <br></br>
                  <input type="radio" value="reason2" name="settings" /> Reason2
               </label>
       </div>

I used now the above code and I have add two buttons, one "Close" and one "OK", but I got stuck on how to make the "Close" Button to close that popup window. Could you help me with that?

 

[pbuk]

I have already tried the version of the link you sent but I get an error message that it must be typescript instead of javascript.

What exactly is the message?

Have you noticed there are now 2 versions of the boilerplate scripts on the MUI documentation site - you switch between them with the buttons at the top left of the box: the image below shows Typescript select (by default). If you do not have a TS transpiler in your build chain you will need to select the JS version.

 

[mathmari]

What exactly is the message?

Have you noticed there are now 2 versions of the boilerplate scripts on the MUI documentation site - you switch between them with the buttons at the top left of the box: the image below shows Typescript select (by default). If you do not have a TS transpiler in your build chain you will need to select the JS version.

View attachment 315585

Ah ok! And then when we want to call it we define <FormDialog /> ?

 

[pbuk]

I used now the above code and I have add two buttons, one "Close" and one "OK", but I got stuck on how to make the "Close" Button to close that popup window. Could you help me with that?

Popup is not a Material UI component (there are two with subtle differences: Popover or Popper). Note that popups/popovers don't generally have buttons, they are intended to close when you click elsewhere. If there is more interaction the normal design idiom is a dialog.

If you are using reactjs-popup there is documentation on closing buttons here https://react-popup.elazizi.com/react-modal/, however note that Material UI is designed to be a complete UI framework and may not play nicely with 3rd party components.

 

[mathmari]

If you are using reactjs-popup there is documentation on closing buttons here https://react-popup.elazizi.com/react-modal/, however note that Material UI is designed to be a complete UI framework and may not play nicely with 3rd party components.

It works with that! Thank you!

 

[mathmari]

I have also an other question : I want to make the height of a card equal to the size of the screen, but this is not the same for each resolution. Is there a way to make it equal to the screen for each resolution?

 

[pbuk]

Is there a way to make it equal to the screen for each resolution?

Set the height to "100vh" (100% of the view height).

 

[mathmari]

Set the height to "100vh" (100% of the view height).

Ok!

Can we use this one also in the TreeView sx?

<TreeView
       aria-label="file system navigator"
       sx={{ flexGrow: 1, height: 195, maxWidth: 350, overflowY: 'auto' }}
>

Because here we just have a number, not px or something like that.

 

[pbuk]

Ok!

Can we use this one also in the TreeView sx?

<TreeView
       aria-label="file system navigator"
       sx={{ flexGrow: 1, height: 195, maxWidth: 350, overflowY: 'auto' }}
>

Because here we just have a number, not px or something like that.

I've no idea - I don't use React MUI - but according to POLA (the principle of least astonishment, a fundamental rule of API design), I would guess that in the sx parameter strings are passed verbatim and numbers are appended with 'px'. I would try height: '100vh'.

 

[mathmari]

I've no idea - I don't use React MUI - but according to POLA (the principle of least astonishment, a fundamental rule of API design), I would guess that in the sx parameter strings are passed verbatim and numbers are appended with 'px'. I would try height: '100vh'.

Ok! I have also an other question. I have an input field for the Name the next to the input field a button, but I make the scrren smaller the button goes down. How can I make it that the input field and the button get smaller but stey on the same line?

So far my code for that is :

                                           <label>
                                                <input
                                                    type="text"
                                                    name="name"
                                                    placeholder="Type your name"
                                                    style={{
                                                        width: '25vw',
                                                        height: '5vh',
                                                        marginTop: '15px',
                                                        float: 'left'
                                                    }}
                                                />
                                            </label>
                                            <button
                                                id="btn"
                                                style={{
                                                    width: '8vw',
                                                    height: '5vh',
                                                    borderWidth: '0',
                                                    fontWeight: 'bold',
                                                    float: 'right',
                                                    marginTop: '15px'
                                                }}
                                            >
                                                OK
                                            </button>

 

[pbuk]

How can I make it that the input field and the button get smaller but stey on the same line?

<input> is a plain HTML element and setting styles like that won't work. You need to use the MUI TextField component https://mui.com/material-ui/react-text-field/

 

[mathmari]

How can I connect the react with FastApi? For example we have this input field with the OK button, and we have the endpoint (POST Request) /name/

Now we have to save the input at the input field in the database with the endpoint /name/ or not?

So when we call the link .../name/ then at the input field we give a name and this one must be saved in the database? Is that correct? Is that the meaning to connect the endpoints with the frontend?

I have to write the code for the request inside the jsx code where I made the input field and so on , right? First I write :

    const client = axios.create({

        baseURL: "https://giant-db-connection.onrender.com/server"

    });

and then I have to save in a variable the input of the input field, or not?

 

[pbuk]

How can I connect the react with FastApi? For example we have this input field with the OK button, and we have the endpoint (POST Request) /name/

Now we have to save the input at the input field in the database with the endpoint /name/ or not?

So when we call the link .../name/ then at the input field we give a name and this one must be saved in the database? Is that correct? Is that the meaning to connect the endpoints with the frontend?

That all depends on what the particular API you are connecting to requires.

I have to write the code for the request inside the jsx code where I made the input field and so on , right?

Absolutely not! The whole point of frameworks like React is the separation of concerns: in other words don't mix your business logic in with your presentation layer. You should do this using an event handler like in https://reactjs.org/docs/handling-events.html. That example uses the onClick event on a button, you will probably want to use the onChange event on an input (or onSubmit on a form for handling a number of changes).

 

[mathmari]

Absolutely not! The whole point of frameworks like React is the separation of concerns: in other words don't mix your business logic in with your presentation layer. You should do this using an event handler like in https://reactjs.org/docs/handling-events.html. That example uses the onClick event on a button, you will probably want to use the onChange event on an input (or onSubmit on a form for handling a number of changes).

So at the beginning we define:

    const client = axios.create({
        baseURL: "https://giant-db-connection.onrender.com/server"
    });

and then inside the code for the input field we need an onClick:

                                                  <button
                                                        id="btn"
                                                        type="submit"
                                                        style={{
                                                            width: '98px',
                                                            height: '40px',
                                                            fontWeight: 'bold',
                                                            float: 'right'
                                                        }}
                                                        onClick={activateButton}
                                                    >
                                                        OK
                                                    </button>

and then we have to define activateButton ? I have seen the following example with GET :

const TreeList = () => {
    const client = axios.create({
        baseURL: "https://abc.com/name" 
      });
    
    const [dataTree, setdataTree] = useState([]);
    // GET with Axios
    useEffect(() => {
        const fetchdataTree = async () => {
        let response = await client.get('');
        setdataTree(response.data);
        };
        fetchdataTree();
    }, []);
     
    return (
    
        <div className="row ml-1">
            <div className="col">
            
                <div className="row mt-2 ">
                    <div className=" text-dark col">
                    {dataTree.length > 0 && <Tree data={dataTree[0].tree_structure[0].Nodes } />}
                    </div>
                </div>
            
            </div>
        </div>
   )
}

So do I maybe have to use also at POST the useEffect() as follows?

useEffect(() => {
        const fetchdataTree = async () => {
        let response = await client.post('');
        setdataTree(response.data);
        };
        fetchdataTree();
    }, []);

 

[pbuk]

Not really: the useEffect hook is for hydrating (i.e. setting the existing values for) the component. What you want for this stage is more like this: https://www.freecodecamp.org/news/how-to-use-axios-with-react/#how-to-make-a-post-request.

 

[mathmari]

As for the POST request with Axios I did :

const [server, setServer] = useState('');
    const handleSubmit = (e) => {
        e.preventDefault();
        axios
            .post(`https://giant-db-connection.onrender.com/server`, { server_url: server, polling_time: 0 })
            .then((res) => console.log(res))
            .catch((error) => console.error(error));
    };

which works! Which is corresponding GET request? Just .get instead of .post? Or how is the GET request defined?

 

[pbuk]

Which is corresponding GET request? Just .get instead of .post? Or how is the GET request defined?

Well yes axios.get() will perform a GET request, but what the path and query parameters (if any) should be depends on the API. Also it would be better to use the client you have set up instead of writing the whole URL all the time something like

    const client = axios.create({
        baseURL: "https://giant-db-connection.onrender.com",
        // If you don't set a timeout it will wait forever if something is wrong.
        timeout: 5000, // 5s.
    });
    const [server, setServer] = useState('');

    // ...

    // Async/await syntax is nicer so declare the arrow function as async.
    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const res = await client.post('/server', { server_url: server, polling_time: 0 });
            console.log(res);
        } catch (error) {
            console.error(error));
        }
    };

 

[mathmari]

Well yes axios.get() will perform a GET request, but what the path and query parameters (if any) should be depends on the API. Also it would be better to use the client you have set up instead of writing the whole URL all the time something like

    const client = axios.create({
        baseURL: "https://giant-db-connection.onrender.com",
        // If you don't set a timeout it will wait forever if something is wrong.
        timeout: 5000, // 5s.
    });
    const [server, setServer] = useState('');

    // ...

    // Async/await syntax is nicer so declare the arrow function as async.
    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const res = await client.post('/server', { server_url: server, polling_time: 0 });
            console.log(res);
        } catch (error) {
            console.error(error));
        }
    };

Ah ok! To call this POST request we go click on a button and with onClick we call then the above function, right?
What happens with a GET request? Then we don't click on a button, we just want that something is shown up, right? Do we just call then the function?

Is the GET request as follows when we want that just the Attributes are shown, as you see in the belox picture?

const [parsed_tree, setParsedTree] = useState('');
    useEffect(() => {
        ParsedTree();
    }, []);
    const ParsedTree = () => {
        axios
            .get(`https://giant-db-connection.onrender.com/opc_ua_tree`)
            .then((res) => ((attributes = res.data.tree_structure.Nodes.Attributes), setParsedTree(attributes)))
            .catch((error) => console.error(error));
    };

Or in JSON format :

 

[mathmari]

I have changed this and I think the way I get the attributes is now correct :

    const [parsed_tree, setParsedTree] = useState('');
    useEffect(() => {
        ParsedTree();
    }, []);
    const ParsedTree = () => {
        axios
            .get(`https://giant-db-connection.onrender.com/opc_ua_tree`)
            .then(
                (res) => (console.log((attributes = res.data[0]['tree_structure'][0]['Nodes'][0]['Attributes'])), setParsedTree(attributes))
            )
            .catch((error) => console.error(error));
    };

The point where I got stuck right now is how to display the attributes. Do we do that with .map ?

 

[pbuk]

It’s not a good idea to fetch data directly in components - it’s that separation of concerns thing again. I would look at Redux, it’s designed to work well with React and it’s got a pretty good tutorial.

 

[mathmari]

It’s not a good idea to fetch data directly in components - it’s that separation of concerns thing again. I would look at Redux, it’s designed to work well with React and it’s got a pretty good tutorial.

So is the way I do the get request completely wrong? Or just how I want to display it?

 

[mathmari]

When the above code is correct do we use .map to display the data?

{setParsedTree .map((x) => {
     <TreeItem nodeId="{x}" label={x} />;
})}

 

[pbuk]

No, it's probably fine (I haven't checked the detail but if it works then it works!).

But the problem comes when you want to display somewhere else e.g. the StartTime for the node with id "i=2257". If you keep the data inside a component's event handler you will have to fetch this from the server again, however if you store the query result as part of the state of a global store you can use it wherever you want - and if that state is implemented in a reactive store then everything stays updated automatically. Redux is one such store, and is the one most often used with React.

 

[pbuk]

When the above code is correct do we use .map to display the data?

{setParsedTree .map((x) => {
     <TreeItem nodeId="{x}" label={x} />;
})}

That depends on the structure of your data and how the TreeItem component you are using works. I think you need to work that out for yourself, I can't design your whole app for you. (Well I can, but it wouldn't be cheap).

But you do have to write code that parses though: think about what you are trying to get the compiler to do with {setParsedTree .map((x) => {.

Or FOLLOW A TUTORIAL.

 

[mathmari]

In React can we use a while loop?

I want to return a Tree so do I not have to check if there are other non-empty children to be printed? How is this defined in React?

 

[pbuk]

In React can we use a while loop?

React is just JavaScript (or TypeScript) so yes, you can use a while loop, although you might find that you use a forEach iterator more often. We usually add another extension to JavaScript, JSX, which means we can do something like this inside our render() method:

  return (
    <div class="node">
      <h3>{node.title}</h3>
      // Check if there are any child nodes.
      if (node.children.length) {
        <ul>
          // Recursively print child nodes.
          node.children.forEach((childNode) => {
            <li><DisplayNode node={childNode} depth={depth + 1}/></li>
          });
        </ul>
      }
    </div>
  );

I want to return a Tree so do I not have to check if there are other non-empty children to be printed? How is this defined in React?

See commented code above.

 

[mathmari]

I had tried the following :

   const [dataObj, setDataObj] = useState([]); 
 
   useEffect(() => {
        fetch('https://giant-db-connection.onrender.com/opc_ua_tree/')
            .then((res) => res.json())
            .then((data) => {
                setDataObj(data[0]['tree_structure'][0].Nodes[0]);
                console.log(dataObj.DisplayName);
                while (dataObj.Nodes) {
                    for (let i = 0; i < dataObj.Nodes.length; i++) {
                        console.log(dataObj.Nodes[i].DisplayName);
                    }
                    setDataObj(dataObj.Nodes);
                }
            });
    }, []);

I want to display all the DisplayNames. First I did it with many for loops and it worked, now I am trying to write it with less code by setting dataObj.Nodes into the current dataObj. Is this correct so far?

Can the result be also in a TreeView (TreeItem) ?

 

[pbuk]

I want to display all the DisplayNames. First I did it with many for loops and it worked, now I am trying to write it with less code by setting dataObj.Nodes into the current dataObj. Is this correct so far?

I wouldn't do it that way. Either the date in the tree is static, in which case there is no point in using a reactive object for it, or it is dynamic in which case you don't want to be managing it inside a component - it should be in a Redux store.

Can the result be also in a TreeView (TreeItem) ?

Of course, see the example at https://mui.com/material-ui/react-tree-view/#rich-object. You may want to pre-parse the data into a much more normalized format.

 

[mathmari]

I wouldn't do it that way. Either the date in the tree is static, in which case there is no point in using a reactive object for it, or it is dynamic in which case you don't want to be managing it inside a component - it should be in a Redux store.

Could you explain that further to me? Do we have to store the data instead of dataObj in a Redux store?

 

[mathmari]

So we save teh whole tree in a Redux store and then we we get the component that we want to print with useSelector ?

 

[pbuk]

Well I'd be inclined to flatten the tree in the response into an object with the id as the key:

{
  'id-1234': {
    title: '...',
    children: [
      'id-2345',
      'id-9876',
    ],
  },
  'id-2345': {
    // ...
  },
  // ...
}

which will make it much easier to use, but otherwise, yes.