Reputation: 61

How to open another tab using React

I have written a simple piece of code to open another tab using React. It currently does not work. I think that something very simple has gone wrong but I am unsure where.

Message.component.jsx

 import React from 'react';
 import ReactDOM from 'react-dom';
 import { fetchData, GET } from '../DAL';
 import Inbox from "/Messages/GetMessages"; 




   <Route path="/Messages/GetMessages" component={MENU.inbox} /> 

    handleClick()
    {
      //this will open the inbox in a new tab 
      window.open("/Messages/GetMessages");

    }

I have added the reference in the Dal.js file

Dal.js

 export function fetchData(API)
{
 return getAsync(API);
}

async function getAsync(API)
{
try
   {
       let response = await fetch(API);
       let data = await response.json();
       data = JSON.parse(data);
       return data;
   } 
 catch (e)
   {
    console.log("ERROR FOUND IN " + API, e);
    return [];
   }
}

 export const GET = {
  INBOX:'Messages/GetMessages'}

It is also in the menu component, so that it can be seen where it is used.

Menu.component.jsx

 import React from 'react';
 import { Button, Icon } from 'semantic-ui-react'


  export const MENU = {
   INBOX: 'INBOX'
  };

 export default class MainMenu extends React.Component {

constructor(props)
{
  super(props)
  this.state = {
    active: MENU.ASSETS
  };
}

_onClick = (item) =>
{
  if (this.state.active !== item)
  {
    this.setState({active: item})
  }
  () => this.props.visible();
}

_triggerUserProfile()
{
  showEditUserForm(51, 10)
}

render() {

  let buttonStyle = {backgroundColor: '#5d7090', color: 'white'};
  let icon = this.props.icon;
  return (
    <MainMenuContainer>
      <div style={{margin: '5px'}}>
        <img width='75px' style={{marginBottom: '5px'}} src="Content/img/logo_white.svg"/>
        <IconButton onClick={() => this.props.visible()}>
          <Icon name={icon}></Icon>
        </IconButton>
        <span onClick={() => this._triggerUserProfile()} style={{float: 'right', color: 'white',    marginBottom: 'auto', marginTop:'7px', cursor: 'pointer'}}>Welcome Back, Alex! <Icon name='chevron down'></Icon></span>
      </div>
      <div>

        <Button animated='vertical' style={buttonStyle}  onClick={() =>      
         this.props.handleClick(MENU.INBOX)}>
          <Button.Content hidden>Inbox</Button.Content>
          <Button.Content visible>
            <Icon name='mail' />
          </Button.Content>
        </Button>
        </div>
    </MainMenuContainer>

Currently nothing happens and the react crashes silently.

Upvotes: 0