I am trying to build a menu using the semantic-ui-react Menu component. But I am unable to use my state inside the Menu.Item component to display individual menu items. How can I use my state inside the Menu.Item
class JobTabs extends React.Component{
constructor(props){
super(props);
this.state={
tabs: [
{title: 'Tab 1', index: 0},
{title: 'Tab 2', index: 1},
{title: 'Tab 3', index: 2}
],
activeTab: 0
}
this.renderTab = this.renderTab.bind(this);
}
renderTab(){
return this.state.tabs.map((tab) => {
return (
<Menu.Item
name={tab.name}
key={tab.index}
active={this.state.activetab === tab.index} />
);
})
}
render() {
return (
<Menu tabular>
{this.renderTab()}
</Menu>
);
}
}
use title instead name
class JobTabs extends React.Component{
constructor(props){
super(props);
this.state={
tabs: [
{title: 'Tab 1', index: 0},
{title: 'Tab 2', index: 1},
{title: 'Tab 3', index: 2}
],
activeTab: 0
}
this.renderTab = this.renderTab.bind(this);
}
renderTab(){
return this.state.tabs.map((tab) => {
return (
<Menu.Item
name={tab.title}
key={tab.index}
active={this.state.activeTab === tab.index} />
);
})
}
render() {
return (
<Menu tabular>
{this.renderTab()}
</Menu>
);
}
}
Related
I need a bit of help here, In an Ant Design table, I need to hide/show a particular column of a table depending on a state value. In the given sandbox link, I need to hide the surname column whenever the switch is Off and show when the switch is On.
Please, someone, look into this, and help me out.
Reference: https://codesandbox.io/s/purple-sun-1rtz1?file=/index.js
There is a working code, but it should be more customize, interactivize, and refactorize depending on your need:
// You can also modify the data in the `handleChnage`
// Or conditionally display it like here:
class EditableTable extends React.Component {
state = {
surNameShow: false
};
constructor(props) {
super(props);
this.columns = [
{
title: "Name",
dataIndex: "name",
width: "30%"
},
{
title: "Surname",
dataIndex: "surname",
width: "30%"
}
];
this.state = {
dataSource: [
{
key: "0",
name: "Edward 1",
surname: "King 1"
},
{
key: "1",
name: "Edward 2",
surname: "King 2"
}
]
};
}
handleChnage = key => {
this.setState({ surNameShow: !this.state.surNameShow }, () => {
console.log(this.state.surNameShow);
});
};
render() {
const { dataSource } = this.state;
const columns = this.columns;
return (
<div>
<p className="mr-3"> Show surname</p>
<Switch onChange={() => this.handleChnage()} />
<Table
bordered
dataSource={dataSource}
columns={
this.state.surNameShow
? columns
: columns.filter(ea => ea.dataIndex !== "surname")
}
pagination={false}
/>
</div>
);
}
}
ReactDOM.render(<EditableTable />, document.getElementById("container"));
Any problem with this code?
class App extends React.Component {
constructor(props) {
super(props);
this.state ={
name: '',
gender: '',
age: '',
};
}
componentWillMount() {
const { steps } = this.props;
const { name, gender, age } =steps;
this.setState({ name, gender,age });
}
the error shows like this :
isn't it defined in the this.state block right above?
Full code here:
App.js
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
age: '',
};
}
componentWillMount() {
const { steps } = this.props;
const { name,age } = steps;
this.setState({ name, age });
}
render() {
const { name, age } = this.state;
return (
<div>
<h3>Summary</h3>
<table>
<tbody>
<tr>
<td>Name</td>
<td>{name.value}</td>
</tr>
<tr>
<td>Age</td>
<td>{age.value}</td>
</tr>
</tbody>
</table>
</div>
);
}
}
SimpleForm.js
const steps = [
{
id: '1',
message: 'What is your name?',
trigger: 'name',
},
{
id: 'name',
user: true,
trigger: '5',
},
{
id: '5',
message: 'How old are you?',
trigger: 'age',
},
{
id: 'age',
user: true,
trigger: '7',
},
{
id: '7',
message: 'Great! Check out your summary',
trigger: 'review',
},
{
id: 'review',
component: <App />,
asMessage: true,
end: true,
}
]
class simpleForm extends React.Component {
render() {
return (
<ChatBot steps={steps} />
)
}
}
export default simpleForm;
The error is clear. You're not sending any props to the App component, so { steps } is undefined, and you can't destructure the property "steps" because it's undefined.
componentWillMount is now a deprecated life cycle method and will be removed in version 17. React Documentation.
One option is defining defaults into the state from props.
e.g.
this.state = {
name: this.props.steps.name || '',
gender: this.props.steps.gender || '',
age: this.props.steps.age || ''
}
You could also set it to state after componentDidMount.
I was playing around with React for the first time and trying to figure out how to make tabs. I found an outline of the code that looks simple and clean enough (do correct me if I'm wrong though, please), but I don't know how to show the content of the tabs outside of the 'constructor'. As I want the tab content to be more than just a couple of words, and the current code seems constricting.
This is the part that I'm talking about:
constructor(props) {
super(props);
this.state = {
activeTabIndex: 0,
initialData: [
{
label: 'Tab 1',
content: 'Content 1',
},
{
label: 'Tab 2',
content: 'Content 2',
},
{
label: 'Tab 3',
content: 'Content 3',
},
],
};
this.handleTabClick = this.handleTabClick.bind(this);
}
How do I pull the content outside of this, if I have too much content to be put inside that? Here is the entire code outline: link. Any suggestions/links are welcome.
And I apologize if I'm explaining this wrong, I'm still trying to figure stuff out. Thanks!
Just create a Component you want to render in Tab Content and assign it to content.
import React, { Component } from "react";
import Tabs from "./Tabs";
import Content from "./Content";
export default class TabView extends Component {
constructor(props) {
super(props);
this.state = {
activeTabIndex: 0,
initialData: [
{
label: "Tab 1",
content: <TabContent />
},
{
label: "Tab 2",
content: "Content 2"
},
{
label: "Tab 3",
content: "Content 3"
}
]
};
this.handleTabClick = this.handleTabClick.bind(this);
}
handleTabClick(index) {
this.setState({
activeTabIndex: index
});
}
render() {
const { initialData, activeTabIndex } = this.state;
const activeItem = this.state.initialData[activeTabIndex];
return (
<div>
<Tabs
handleTabClick={this.handleTabClick}
data={this.state.initialData}
activeTabIndex={activeTabIndex}
/>
<Content content={activeItem.content} />
</div>
);
}
}
const TabContent = () => (
<div>
<p>I am here</p>
</div>
);
i have been using this plugin react-native-tab-view and for my case i have 5 routes but all use the same component so its rendered five times the component and also have an api call that i have inside the component that its fired 5 times.So my question is if there is a way to render only the tab that i selected besides iam using the same component this is my code:
const FirstRoute = () => (
<View>
<PostsList />
</View>
);
const initialLayout = {
height: 0,
width: Dimensions.get('window').width,
};
class Home extends Component {
constructor() {
super();
this.state = {
isData: true,
index: 0,
routes: [
{ key: 'first', title: 'Todos' },
{ key: 'second', title: 'Encontrados' },
{ key: 'third', title: 'Perdidos' },
{ key: 'four', title: 'Adopción' },
{ key: 'five', title: 'Seguidos' },
]
};
}
_renderTabBar = props => (
<TabBar
{...props}
scrollEnabled
indicatorStyle={styles.indicator}
style={styles.tabbar}
tabStyle={styles.tab}
labelStyle={styles.label}
/>
);
_renderScene = SceneMap({
first: FirstRoute,
second: FirstRoute,
third: FirstRoute,
four: FirstRoute,
five: FirstRoute
})
_handleIndexChange = index => {
this.props.selected_tab(index);
this.setState({
index,
});
}
render() {
return (
<TabView
navigationState={this.state}
renderTabBar={this._renderTabBar}
renderScene={this._renderScene}
onIndexChange={this._handleIndexChange}
initialLayout={initialLayout}
/>
)
}
}
I have defined some sample data (collection) and trying to iterate through but getting Failed to Compile and it's pointing to render() { in this component:
class RecipeList extends Component {
constructor(props) {
super(props);
this.state = {
recipes: {
"1": {
id: 1,
url: 'http://via.placeholder.com/300x300',
title: '1st Title',
description: 'some decription 1'
},
"1": {
id: 2,
url: 'http://via.placeholder.com/300x300',
title: '1st Title',
description: 'some decription 1'
},
"1": {
id: 3,
url: 'http://via.placeholder.com/300x300',
title: '1st Title',
description: 'some decription 1'
}
}
}
render() {
const recipeIds = Object.keys(this.state.recipes);
const Items = recipeIds.map((recipe) => {
return (
<RecipeListItem
key={recipe}
recipe={recipe}
/>
);
});
return (
<div>
{Items}
</div>
);
}
}
You need unique keys for your recipes. Try the following
class RecipeList extends Component {
constructor(props) {
super(props);
this.state = {
recipes: {
"1": {
id: 1,
url: 'http://via.placeholder.com/300x300',
title: '1st Title',
description: 'some decription 1'
},
"2": {
id: 2,
url: 'http://via.placeholder.com/300x300',
title: '1st Title',
description: 'some decription 1'
},
"3": {
id: 3,
url: 'http://via.placeholder.com/300x300',
title: '1st Title',
description: 'some decription 1'
}
}
}
}
render() {
const recipeIds = Object.keys(this.state.recipes);
const Items = recipeIds.map((key) => {
return (
<div
key={key}>
{this.state.recipes[key].id}
</div>
);
});
return (
<div>
{Items}
</div>
);
}
}
Edit: Updated the code to provide the whole class.