I have a react app that uses package mui-datatables. I want to be redirected to "/edit-form" onRowClick, but it didn't work (nothing happens, no errors either).
import React, { Component } from "react";
import { Link as RouterLink } from "react-router-dom";
import Link from "#material-ui/core/Link";
import MUIDataTable from "mui-datatables";
class DataTable extends Component {
state={...}
redirectToForm = props => <RouterLink to="/edit-form" {...props}/>
render() {
const options = {
onRowClick: rowData => this.redirectToForm(rowData)
};
return (
<Link
color="secondary"
className={classes.button}
component={this.goToDetailedTable}
>
Detail
</Link>
<MUIDataTable
title={title}
columns={value.state.columnName}
data={value.state.rowData}
options={options}
/>
)
}
When I console.log(rowData), it did print out the row data:
const options = {
onRowClick: rowData => console.log(rowData)
};
Instead of using <Link/> try calling history from the history package and then just history.push('edit/form').
Related
I have deployed React App in LWC component without using Aura container basically bundle react application with webpack as static resource and use them inside a LWC and able to render.
able to open individual stylesheet for debugging purpose.
Question: Not able to debug the code/not opening individual JS file/component in developer console.
lwcReactContainer.html
<template>
<div id="react-app-root"></div>
</template>
lwcReactContainer.js
import { LightningElement, wire } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import SPMLayoutEditor1 from '#salesforce/resourceUrl/SPMLayoutEditor1';
//import myStaticStyles from '#salesforce/resourceUrl/myStaticStyles';
import {
APPLICATION_SCOPE,
createMessageContext,
MessageContext,
publish,
releaseMessageContext,
subscribe,
unsubscribe,
} from 'lightning/messageService';
import getContactList from '#salesforce/apex/ContactController.getContactList';
export default class LWCReactContainer extends LightningElement {
renderedCallback() {
this.apiInProgress = true;
Promise.all([
loadScript(this, SPMLayoutEditor1 + '/FSLMAX_LayoutEditor/static/js/main.js'),
loadStyle(this, SPMLayoutEditor1 + '/FSLMAX_LayoutEditor/static/css/main.css'),
this.getUserInfo(), this.getContactList(), this.fetchObjectList()
]).then((data) => {
const contacts = data[3];
mount(this.template.querySelector('div'), { contacts });
});
}
I am trying to update my react native app to fetch data from the backend every few seconds. Below is my code where I want the data in the transaction history table to update automatically. What is the best way to do this?
import React from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, ActivityIndicator, Text, FlatList } from 'react-native';
import TransactionShape from '../../data/model-shapes/Transaction';
import TransactionListItem from '../../components/wallets/TransactionListItem';
import CardStyles from '../../utils/styling/Cards';
import Colors from '../../utils/styling/Colors';
const keyExtractor = ({ id }) => id;
function renderTransactionItem({ item: transaction }) {
return <TransactionListItem transaction={transaction} />;
}
const TransactionHistorySection = ({ transactions, isFetching }) => {
return (
<View style={CardStyles.sectionCard}>
{isFetching ? (
<ActivityIndicator size="large" />
) : (
<View>
<Text style={styles.sectionHeading}>Transaction History</Text>
{transactions.length ? (
<FlatList
data={transactions}
keyExtractor={keyExtractor}
renderItem={renderTransactionItem}
/>
) : (
<Text style={styles.growContainer}>No Transactions</Text>
)}
</View>
)}
</View>
);
};
You coud use a setInterval(function(){ fetch_something }, 3000);
function to run the function to fetch your data on interval you want. then whenever the data change your flatlist will shown the new data
I'm trying to use the MUI toggle group with React Hook Form however I can't get the value to post when submitting the form. My toggle group component looks like this:
import FormatAlignCenterIcon from '#material-ui/icons/FormatAlignCenter';
import FormatAlignLeftIcon from '#material-ui/icons/FormatAlignLeft';
import FormatAlignRightIcon from '#material-ui/icons/FormatAlignRight';
import FormatAlignJustifyIcon from '#material-ui/icons/FormatAlignJustify';
import ToggleButton from '#material-ui/lab/ToggleButton';
import ToggleButtonGroup from '#material-ui/lab/ToggleButtonGroup';
import React from 'react';
import {Controller} from "react-hook-form";
export default function TestToggleGroup(props) {
const {control} = props;
const [alignment, setAlignment] = React.useState('left');
const handleAlignment = (event) => {
setAlignment(event[1]);
};
return (
<Controller
name="ToggleTest"
as={
<ToggleButtonGroup
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton value="left" aria-label="left aligned" key="left">
<FormatAlignLeftIcon/>
</ToggleButton>
<ToggleButton value="center" aria-label="centered" key="center">
<FormatAlignCenterIcon/>
</ToggleButton>
<ToggleButton value="right" aria-label="right aligned" key="right">
<FormatAlignRightIcon/>
</ToggleButton>
<ToggleButton value="justify" aria-label="justified" disabled key="justify">
<FormatAlignJustifyIcon/>
</ToggleButton>
</ToggleButtonGroup>
}
value={alignment}
onChange={(e) => {
handleAlignment(e);
}}
valueName={"alignment"}
control={control}
/>
);
}
Not sure exactly what I'm doing wrong but any assistance would be greatly appreciated.
My workaround was using an effect to manually set the value using setValue and then using getValues() inside your handleSubmit function to get the values.
const { control, setValue } = props;
//Effect
React.useEffect(() => {
setAlignment('ToggleTest', alignment);
}, [alignment, setAlignment]);
I have searched on the internet for this topic and I have found many different answer but they just do not work.
I want to make a real redirect with react-router to the '/' path from code. The browserHistory.push('/') code only changes the url in the web browser but the view is not refreshed by browser. I need to hit a refresh manually to see the requested content.
'window.location = 'http://web.example.com:8080/myapp/'' works perfectly but i do not want to hardcode the full uri in my javascript code.
Could you please provide me a working solution?
I use react ^15.1.0 and react-router ^2.4.1.
My full example:
export default class Logout extends React.Component {
handleLogoutClick() {
console.info('Logging off...');
auth.logout(this.doRedirect());
};
doRedirect() {
console.info('redirecting...');
//window.location = 'http://web.example.com:8080/myapp/';
browserHistory.push('/')
}
render() {
return (
<div style={style.text}>
<h3>Are you sure that you want to log off?</h3>
<Button bsStyle="primary" onClick={this.handleLogoutClick.bind(this)}>Yes</Button>
</div>
);
}
}
You can use router.push() instead of using the history. To do so, you can use the context or the withRouter HoC, which is better than using the context directly:
import { withRouter } from 'react-router';
class Logout extends React.Component {
handleLogoutClick() {
console.info('Logging off...');
auth.logout(this.doRedirect());
};
doRedirect() {
this.props.router.push('/') // use the router's push to redirect
}
render() {
return (
<div style={style.text}>
<h3>Are you sure that you want to log off?</h3>
<Button bsStyle="primary" onClick={this.handleLogoutClick.bind(this)}>Yes</Button>
</div>
);
}
}
export default withRouter(Logout); // wrap with the withRouter HoC to inject router to the props, instead of using context
Solution:
AppHistory.js
import { createHashHistory } from 'history';
import { useRouterHistory } from 'react-router';
const appHistory = useRouterHistory(createHashHistory)({
queryKey: false
});
export default appHistory;
Then you can use appHistory from everywhere in your app.
App.js
import appHistory from './AppHistory';
...
ReactDom.render(
<Router history={appHistory} onUpdate={() => window.scrollTo(0, 0)}>
...
</Router>,
document.getElementById('root')
);
Logout.js
import React from 'react';
import appHistory from '../../AppHistory';
import auth from '../auth/Auth';
import Button from "react-bootstrap/lib/Button";
export default class Logout extends React.Component {
handleLogoutClick() {
auth.logout(this.doRedirect());
}
doRedirect() {
appHistory.push('/');
}
render() {
return (
<div style={style.text}>
<h3>Are you sure that you want to log off?</h3>
<Button bsStyle="primary" onClick={this.handleLogoutClick.bind(this)}>Yes</Button>
</div>
);
}
}
this topic helped me a lot:
Programmatically navigate using react router
A Meteor/React noob here, going through the Meteor-React tutorial and got stuck on step 3. My problem is that the data is not being displayed in the browser, although it exists in the db.
Here is my imports/ui/App.jsx:
import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Tasks } from '../api/tasks.js';
import Task from './Task.jsx';
class App extends Component {
renderTasks() {
return this.props.tasks.map((task) => (
<Task key={task._id} task={task} />
));
}
render() {
return (
<div className="container">
<header>
<h1>Todo List</h1>
</header>
<ul>
{this.renderTasks()}
</ul>
</div>
);
}
}
App.propTypes = {
tasks: PropTypes.array.isRequired,
};
export default createContainer(() => {
return {
tasks: Tasks.find({}).fetch(),
};
}, App);
No errors show up in console.
Basically this.props.tasks returns empty array. But db.tasks.find({}) in console shows records. Without changing much around, if I hardcode Tasks records, they display alright, so the issue isn't with Task component. Anyone can help here? Would much appreciate.
client/main.jsx:
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import App from '../imports/ui/App.jsx';
Meteor.startup(() => {
render(<App />, document.getElementById('render-target'));
});
package.json:
{
"name": "simple-todos",
"private": true,
"scripts": {
"start": "meteor run"
},
"dependencies": {
"meteor-node-stubs": "~0.2.0",
"react": "^15.1.0",
"react-addons-pure-render-mixin": "^15.1.0",
"react-dom": "^15.1.0"
}
}
npm version 3.3.12
node version 5.6.0
As of your description from, it seems that your database is not accessible on both server & client. May be you forgot to add the reference of your database in the server side. try to import your tasks main.js file of your server.
Make sure your server/main.js has the following line:
import '../imports/api/tasks.js';