score:2
class entriestable extends react.component {
constructor(props) {
super(props);
console.log(this.props.plannerid);
this.state = {
editabletasks: [],
tasks: [],
plannerid: this.props.plannerid,
};
var state = this.state;
/* this isn't completely necessary but usually it is recommended you
* bind the class method in the constructor so it isn't bound on each
* render
*/
this.edittask = this.edittask.bind(this);
}
componentdidmount() {
this.gettasks(this.state.plannerid);
}
edittask(id) {
/* so jquery and react are kind of at odds with each other on fundamentals
* react is supposed to be declarative whereas jquery is imperative. using
* jquery and react together is typically discouraged unless there is a real
* need for it. in react you are supposed to define how you want the ui to render
* based on some variables. you have two options available to you props and state.
* props are passed from the parent and are immutable. state is managed within that
* component and is mutable. so we have added a variable called editabletasks to your
* state that will contain an array of all editable tasks. instead of trying to hide
* or show items here, we are simply going to add the id of now editable task to that
* array
*
*/
var nextstate = this.state;
nextstate.editabletasks.push(id);
this.setstate(nextstate);
}
updatetask(id, name) {
$.ajax({
type: "get",
url: "/task/update",
data: { id: id, name: name },
contenttype: "application/json; charset=utf-8",
success: function (data) {
console.log(data);
//this.setstate({ tasks: data.returnobject, loading: false });
}.bind(this),
error: function (xhr, status, err) {
console.log(err);
}
});
}
createtask(name) {
//make api call to create planner here.
var data = {
name: name,
plannerid: model.plannerid,
status: "not complete",
description: "",
affiliation: "",
footprint: "",
created: new date(),
modified: null,
};
$.ajax({
type: "post",
url: "/task/add",
data: json.stringify(data),
contenttype: "application/json; charset=utf-8",
success: function (data) {
console.log(data);
this.gettasks(model.plannerid);
}.bind(this),
error: function (xhr, status, err) {
console.log(err);
}
});
}
gettasks(id) {
this.setstate({ tasks: [], loading: true });
$.ajax({
type: "get",
url: "/task/getall",
data: { id: id },
contenttype: "application/json; charset=utf-8",
success: function (data) {
console.log(data);
this.setstate({ tasks: data.returnobject, loading: false });
}.bind(this),
error: function (xhr, status, err) {
console.log(err);
}
});
}
render() {
const tasks = this.state.tasks.map((task) => {
var editable = this.state.editabletasks.filter(id => id === task.id).length > 0;
/* now here we are going to check whether this item is editable
* based on id. so we assign a variable that will eval to a bool
* based on whether when you filter editabletasks to see if it contains
* the current items id the length is greater than 0.
*
* now below instead of applying some id attribute we are going to return either
* the input or the span based on whether it is editable using a ternary operation
*
*/
return (
<li key={task.id} classname="list-group-item" style={{minheight: '50px'}}>
<div classname="pull-left" style={{width: '50%'}}>
{editable ? <input type="text" /> : <span onclick={this.edittask( task.id)}>{task.name}</span>}
</div>
<div classname="pull-right" style={{margintop: '-5px', width: '50%'}}>
<div classname="pull-right">
<button classname="btn btn-default">add</button>
<button classname="btn btn-default">edit</button>
</div>
</div>
</li>
);
});
return (
<div classname="table-wrapper">
<div classname="task-container">
<h3>{this.props.rowname}</h3>
</div>
<ul id="taskscontainer">
{tasks}
<li classname="list-group-item list-group-item-last"><input type="button" value="add task" onclick={this.addtask.bind(this)} classname="btn btn-success btn-override" /></li>
</ul>
</div>
);
}
};
so the above should work for making items editable. now it doesn't handle actually editing them or returning them to non-editable state. but this should illustrate how you should be accomplishing this the 'react-way'.
i encourage you to drop jquery. jquery is going to make your react code harder to manage and make it harder to embrace the react way. if you need something for ajax requests, there are plenty of smaller libraries that just as well suited (superagent is highly recommended but a quick google can lead you to many other)
let me know if you have any other question.
score:1
to show dynamically show/hide a list of items in react implement visible.js in your file:
import react, { component } from 'react'
import { link, router } from 'react-router';
import { connect } from 'react-redux';
import { card, cardactions, cardheader, cardmedia, cardtitle, cardtext } from 'material-ui/card';
import { list, listitem } from 'material-ui/list';
import divider from 'material-ui/divider';
import '../../../static/images/cms-img3.jpg';
import '../../../static/images/cms-img4.jpg';
import '../../../static/images/cms-img5.jpg';
import '../../../static/images/grid-list/vegetables-790022_640.jpg';
import '../../../static/images/grid-list/00-52-29-429_640.jpg';
import '../../../static/images/grid-list/burger-827309_640.jpg';
import '../../../static/images/grid-list/camera-813814_640.jpg';
import '../../../static/images/grid-list/morning-819362_640.jpg';
import '../../../static/images/grid-list/hats-829509_640.jpg';
import '../../../static/images/grid-list/honey-823614_640.jpg';
import '../../../static/images/grid-list/water-plant-821293_640.jpg';
import '../../../static/images/video.mp4';
import '../../../static/images/video123.mp4';
class visibledata extends component {
constructor(props) {
super(props);
this.state = {
items: [],
};
this.ontodoclick = this.ontodoclick.bind(this);
}
componentdidmount() {
fetch('http://new.anasource.com/team9/news-api/?operation=view')
.then(result => result.json()
.then(news => {
this.setstate({ items: news.news });
})
);
}
componentwillmount() {
window.onpopstate = (event) => {
this.componentdidmount();
};
}
ontodoclick(id) {
this.setstate({
items: this.state.items.filter(item => item.news_id == id)
});
}
render() {
return (
<data show={this.ontodoclick} items={this.state.items} />
)
}
}
class data extends component {
ontodoclick(e, id) {
this.props.show(id);
}
render() {
return (
<div>
{this.props.items.map(item => {
const p = item.news_type == "image";
const r = item.news_type == "video";
return <link to={"todo/#/" + item.news_id} key={item.news_id}>
<card onclick={(e) => this.ontodoclick(e, item.news_id)} style={{margin:15}}>
<cardtitle title={item.news_title} subtitle={item.news_description}>
<cardmedia>
{p
? <img src={item.news_src_url} />
: null
}
</cardmedia>
<cardmedia>
{r
? <video controls><source src={item.news_src_url} type="video/mp4"/></video>
: null
}
</cardmedia>
<div classname='date'>{item.news_created_date}</div>
</cardtitle>
</card>
</link>
})
}
</div>
)
}
}
export default visibledata;
Source: stackoverflow.com
Related Query
- How to dynamically show/hide a list of items in react
- How to conditionally show list items in React based on screen size
- How to show and hide some columns on React Table?
- how to hide and show a div in react
- How to dynamically show hide Formik form field depending on another form field
- how to hide or show a div if checkbox is selected in React JS
- How to add components to list dynamically in React with no redundant render?
- how to hide and show loading spinner - Activity Indicator react native, managing props and state
- How to have different style for items at certain locations in a list in React Native?
- React - how to use hooks to hide or show a component based on an onChange event
- React show same list of items when browser back button is clicked
- how to create a space between list items in React material
- How can show and hide react components using hooks
- How to dynamically show or hide form fields depending on the state of a BooleanInput field in react-admin?
- How do I apply CSS transitions (e.g. fade-ins) to a list of items in React so their animations are sequenced one after the other on render?
- React JS - How can I show / hide some parts of component based on URL path?
- How to deselect list items in react admin custom bulk action buttons
- how to show and hide popup only when promise is active ? React
- React table how to show 3 items each row using map loop
- How to hide and show list contents: ReactJS
- How to dynamically show loader on react button
- React MaterialTable editable row validation - how to show and hide error?
- How to show message when filtered list is empty in React
- How to hide a column on REACT Material table in all rows and show it on Edit for the Particular Row I am editing and Add Operations on new row adding?
- How to Hide and show HTML based on a cookie existing or not in a React App
- How can I render list items dynamically and recursively from a nested array?
- How to show and hide components in React to implement a multiple steps form?
- I want to show and hide a form on toggle of a radio button in React js . Im trying how to use react hooks to hide or show a component on onChange even
- how to set ref in list of items react js?
- How to reduce render time while rendering huge list of items in Ionic React
More Query from same tag
- handler change Select input object in react js
- Add text over Image from Semantic UI
- What is the difference between those two state updates in react?
- react bootsrap element not centering
- Unhandled Runtime Error when trying to using Next.js / React.js,
- React on docker-compose: ERROR [3/6] COPY package.json ./
- Using connect() with React/Redux/TypeScript cannot find property
- How to change a single value in a property in a nested object in an array
- How to use Typescript definitions imported as `* as`
- Sorting Number Strings Using Lodash and React?
- How to call whole array in API call
- Set up webpack to run locally on a custom domain over HTTPS
- Property 'display' does not exist on type 'HTMLIonListElement'
- 'npm start' with create-react-app not launching server on macOS
- Can't use state value as props for child component
- why count prop does not update in Student
- Mobile Scrolling Bug
- Way to test the order of elements in React
- Using google sign in button with react
- How do I filter based on matching keyword?
- How can I pass calculated amount to state in react
- How to combine JSX component with dangerouslySetInnerHTML
- React-typescript: Object is of type 'unknown'. TS2571
- In Typescript, what should the return type be for a component returning MUI TableContainer?
- Redux, access data inside API object with useSelector
- In rtl, avoid rendering multiple components within a single test?
- Override styled-components in React
- setState(...): This usually means you called set state() on an unmounted component
- React useParams undefined for editing user profile
- Validate Cognito session in Lambda function