logo
down
shadow

Reactjs: Rewriting Jquery app to Reactjs for deleting contents


Reactjs: Rewriting Jquery app to Reactjs for deleting contents

Content Index :

Reactjs: Rewriting Jquery app to Reactjs for deleting contents
Tag : reactjs , By : Ganesh
Date : December 05 2020, 12:18 PM

With these it helps This is a solution that partly works for me by updating only the onSubmit() function code. The solution still has one downtime as it only send the last selected value to the server side. At this junction, this the best solution I have for now with help from Mr. Alexander Deck..
onSubmit = (e) => {
    e.preventDefault();
 const { chrk} = this.state;
//let arr = [];
const arr = [];
arr.push(chrk);

const data = { check: arr };
alert(arr);
    axios.post('http://localhost/apidb_react/checkbox.php', data)
          .then(res => console.log(res.data));
  }

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Reactjs: jQuery custom content scroller with reactjs


Tag : javascript , By : Shawazi
Date : March 29 2020, 07:55 AM
I hope this helps . That’s not a React error. That’s based on your module loader (webpack, I’m guessing?) treating the jQuery plugin as if it were an ES2015 module. Try importing your plugin in the CommonJS style. In other words, replace:
import mCustomScrollbar from 'malihu-custom-scrollbar-plugin';
var mCustomScrollbar = require('malihu-custom-scrollbar-plugin');

How to ignore internal ReactJS code in the call stack while debugging ReactJS


Tag : reactjs , By : user147496
Date : March 29 2020, 07:55 AM
this will help You can blackbox the React library files in DevTools. This stop the debugger from stepping into the code, and a message will appear in the call stack to say "x frames are hidden (black-boxed)".
See Blackbox JavaScript Source Files for a complete guide on using this feature.

Reactjs: How to properly fetch each users record from database on pop button click using Reactjs


Tag : reactjs , By : Thomas Gueze
Date : March 29 2020, 07:55 AM
should help you out The problem is you're making the request in the App component and storing in state but you're trying to access the state in a child component so it will never actually read the data.
To fix this you need to pass in the chat data via prop
      <OpenedUser
        chatData={this.state.chatData}
        key={user.id}
        data={user}
        close={this.close}
      />
const mockApi = () => {
  return new Promise((resolve, reject) => {
    const json = [{ id: "1", firstname: "faco", lastname: "facoyo" }];
    resolve(json);
  });
};

class User extends React.Component {
  open = () => this.props.open(this.props.data.id, this.props.data.name);
  render() {
    return (
      <React.Fragment>
        <div key={this.props.data.id}>
          <button
            onClick={() => this.open(this.props.data.id, this.props.data.name)}
          >
            {this.props.data.name}
          </button>
        </div>
      </React.Fragment>
    );
  }
}

class OpenedUser extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hidden: false
    };
  }

  componentDidMount() {} // close component didmount

  toggleHidden = () =>
    this.setState(prevState => ({ hidden: !prevState.hidden }));

  close = () => this.props.close(this.props.data.id);

  render() {
    return (
      <div key={this.props.data.id} style={{ display: "inline-block" }}>
        <div className="msg_head">
          <button onClick={this.close}>close</button>
          <div>user {this.props.data.id}</div>
          <div>name {this.props.data.name}</div>
          {this.state.hidden ? null : (
            <div className="msg_wrap">
              <div className="msg_body">Message will appear here</div>

              <b>
                {" "}
                Load Message from Database for each user ({this.state.chatData1}
                ){" "}
              </b>
              <ul>
                {this.props.chatData.map((pere, i) => (
                  <li key={i}>
                    {pere.lastname} - {pere.id}----- {pere.username}
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>
      </div>
    );
  }
}
class App extends React.Component {
  constructor() {
    super();

    this.state = {
      shown: true,
      chatData: [],
      activeIds: [],
      data: [
        { id: 1, name: "user 1" },
        { id: 2, name: "user 2" },
        { id: 3, name: "user 3" },
        { id: 4, name: "user 4" },
        { id: 5, name: "user 5" }
      ]
    };
  }

  toggle() {
    this.setState({
      shown: !this.state.shown
    });
  }

  open = (id, name) => {
    alert(id);
    alert(name);

    //start axios api call

    const user_data = {
      uid: "id",
      uname: "name"
    };

    // this.setState({ loading_image: true }, () => {
    //   axios
    //     .post("http://localhost/apidb_react/search_data.php", { user_data })

    //     .then(response => {
    //       this.setState({
    //         chatData1: response.data[0].id,
    //         chatData: response.data,
    //         loading_image: false
    //       });

    //       console.log(this.state.chatData);
    //       alert(this.state.chatData1);
    //     })
    //     .catch(error => {
    //       console.log(error);
    //     });
    // });

    this.setState({ loading_image: true }, () => {
      mockApi().then(data => {
        this.setState({
          chatData1: data[0].id,
          chatData: data,
          loading_image: false
        });
      });
    });

    // end axios api call

    this.setState(prevState => ({
      activeIds: prevState.activeIds.find(user => user === id)
        ? prevState.activeIds
        : [...prevState.activeIds, id]
    }));
  };

  close = id => {
    this.setState(prevState => ({
      activeIds: prevState.activeIds.filter(user => user !== id)
    }));
  };

  renderUser = id => {
    const user = this.state.data.find(user => user.id === id);
    if (!user) {
      return null;
    }
    return (
      <OpenedUser
        chatData={this.state.chatData}
        key={user.id}
        data={user}
        close={this.close}
      />
    );
  };

  renderActiveUser = () => {
    return (
      <div style={{ position: "fixed", bottom: 0, right: 0 }}>
        {this.state.activeIds.map(id => this.renderUser(id))}
      </div>
    );
  };

  render() {
    return (
      <div>
        {this.state.data.map(person => (
          <User key={person.id} data={person} open={this.open} />
        ))}
        {this.state.activeIds.length !== 0 && this.renderActiveUser()}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

FooTable with ReactJS (How can I call jQuery plugin from ReactJS component?)


Tag : jquery , By : user183275
Date : March 29 2020, 07:55 AM

Django + webpack + reactjs: how to generate multiple pages by separate reactjs code for each url


Tag : django , By : TC.
Date : March 29 2020, 07:55 AM
should help you out I am trying to follow: , Change
entry: './mysite/polls/static/js/index',
entry: {
  main: './mysite/polls/static/js/index',
  HomeApp: './mysite/polls/static/js/HomeApp',
},
Related Posts Related QUESTIONS :
  • How to add and remove property from Redux state
  • Can I, (and should I), make assertions about what HTML elements a component renders using Enzyme's shallow()?
  • Testing function calls in Jest after button click (mocking fetch calls)
  • How can I show a card shadow on all sides?
  • Jest - Map through an Array of Items and test their Values
  • Run Effect hook only when both dependencies change
  • What is the difference between .ts and .tsx extensions. Both are used as extensions for typescript files in react. So wh
  • Font size of tooltip in speeddialaction of React's Material UI
  • Module Not Found - Webpack Dev Server
  • React not rendering all elements within a list of components
  • How to change attribute of a React Element
  • ReactJs: How to back focus to input field after resetting the form
  • Multilanguage in react using redux
  • React JS — how do I add child components and set calculated transformations?
  • ReactJS componentDidUpdate() prevState equals to currentState
  • TypeScript error: JSX element type 'Tree' does not have any construct or call signatures. I'm not able to import my own
  • createProvider is not exported from react-redux?
  • Error:(19, 35) TS2304: Cannot find name 'T'. Why I can't extend interface in TS?
  • How can I secure images in S3 buckets with Auth0 and a React front-end
  • React Import Multiple Functions
  • React render when props change
  • Cannot read property 'array' of undefined
  • What is the expected return of `useEffect` used for?
  • Why i need to install npm for react native app
  • How to fix 'module not found' for audio files using file-loader? Images, CSS, and JSON are working just fine
  • Can't render the component received as a prop.children in my parent component
  • rootInstance.findByType("input"); Giving Expected 1 but found 2 instances with node type : "undefined&quo
  • Reset state to initial state only for specific state variables
  • Get error TS2322: Type 'any' is not assignable to type 'never'
  • Is it possible to update the store outside of the Provider context in Redux?
  • Copy to clipboard is copying value with two newlines
  • How to test useRef with the "current" prop in jest/enzyme
  • How to remove value of each key in Async Storage in React Native at the time of Logout
  • Is there a simpler way to write this React code
  • Auth0. How to get user's permissions in access token?
  • this.setState is not updating the state property
  • for loops in reacts js
  • The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:3000, http://localhost:3000', but on
  • Slowly implementing redux to an existing React.js project
  • how to use document.querySelector().innerHTML in react
  • Pass params to firestore collections
  • BrowserRouter vs Router with history.push()
  • React Formik onSubmit RestAPI called twice, once click a submit button
  • Can this assignment be made simpler by destructuring?
  • Manually fire a query via compose( graphql() )
  • Why not maintain state in localStorage if redux loses state on refresh?
  • How to remove duplicated before map
  • How to write date in a field with date format?
  • How to listen to localstorage value changes in react?
  • Apollo local state - querying for object w unknown keys
  • Submit works with second try
  • Error : Cannot read property 'mountComponent' of undefined
  • How to export module properly so vscode can show my module in suggestion [ctrl+space]?
  • React - How to do network requests inside a setState, is my code okay?
  • Building CRM Web Resources with React
  • How to get Material UI Icon SVG path? React Icon Picker
  • How to use data attributes in React
  • Problem importing stateless function is react
  • Best practice to prevent state update warning for unmounted component from a handler
  • How to inject `apollo client` through react context via `contextType` instead of consumer?
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com