How to add additional props to a React element passed in as a prop?

See also questions close to this topic

• console.log looping json data but display not

  I'm trying to display json data on the page, however when sending the output to html it only displays the last id.

  When using console.log it loops through each id available but not on the page output itself

  var username = $("#usernameinfo").text();
  
  $.ajax({
      type: "GET",
      dataType: 'json',
      url: "<?= base_url()?>"+"account/listings/more_user_ads",
      data: {
          "username": username,
          "pid": "<?=$this->input->get('pid')?>"
      },
      success: function(res){
          for (var i = 0; i < res.length; i++){
              var output = "";
              var object = res[i];
  
              output = "<p>" + object.id + "</p>";
              $("#tg-authoradsslider").html(output);
              // outputs only the id of 3 which is the last id in the loop
  
              console.log(output);
              /* consoles.logs 
              <p>1</p>
              <p>2</p>
              <p>3</p>*/
          }
      }
  });
  
• ReactJS Form Submit keeps causing refresh of page

  Learning basics of react here.

  I have a simple Zipcode form I'm trying to update the Zipcode in the form component I made and in the app parent component I made.

  In my onSumbit prop I call a function to update and added e.preventDefault();

  but the submit button still refreshes everything and i'm pretty sure loses my data.

  I commented out my onInput functions and props because I realize it's not affecting my onSubmit action but let me know if that's needed in React for some reason.

  I can add more if needed. In my index I am using bootstrap4 cdn

  App.js:

     import React, { Component } from 'react';
  import GMap from './GMap';
  import ZipCode from './ZipCode';
  import './css/App.css';
  
  class App extends Component {
    constructor(props){
      super(props);
      this.state = {zipcode : ''};
      this.onZipCodeChange = this.onZipCodeChange.bind(this);
    }
  
    onZipCodeChange(e){
      e.preventDefault();
      console.log('App has detected ZipCode Change');
      const value = e.target;
      this.setState({zipcode: value});
    }
  
    render() {
      return (
        <div className="App">
          <header>
            <nav className="navbar navbar-expand-lg navbar-light bg-light">
              <a className="navbar-brand" href="#">Navbar</a>
              <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
              </button>
              <div className="collapse navbar-collapse" id="navbarNav">
                <ul className="navbar-nav">
                  <li className="nav-item active">
                    <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
                  </li>
                  <li className="nav-item">
                    <a className="nav-link" href="#">Features</a>
                  </li>
                  <li className="nav-item">
                    <a className="nav-link" href="#">Pricing</a>
                  </li>
                  <li className="nav-item">
                    <a className="nav-link disabled" href="#">Disabled</a>
                  </li>
                </ul>
              </div>
            </nav>
          </header>
            <ZipCode onSubmit={this.onZipCodeChange}  />
            <GMap />
        </div>
      );
    }
  }
  
  export default App;
  

  ZipCode.js:

  import React, { Component } from 'react';
  import './css/App.css';
  
  
  class ZipCode extends Component {
    constructor(props) {
        super(props);
        this.state = {zipcode: ''};
      //  this.updateZip = this.updateZip.bind(this);
        this.submitZipCode = this.submitZipCode.bind(this);
      }
      componentDidMount() {
        console.log(" ZipCode will mount");
    }
  
    componentWillUnmount() {
      console.log("ZipCode will unmount");
    }
  
    submitZipCode(e){
      e.preventDefault();
      const { value } = this.state;
      this.setState({zipcode: value});
      const { onSubmit } = this.props; //pull out to call method it is linked to
      console.log('submitting zipcode');
      onSubmit(value);
    }
  
    // updateZip(e){
    //   const value = e.target;
    //   this.setState({ zipcode : value });
    //   console.log('zipcode updated to: '+ this.state.zipcode.value);
    // }
    //  onInput={this.updateZip}
  
    render(){
      return(
        <div className="row">
          <div className="col-sm-4 col-md-4 col-lg-4">
            <form onSubmit={this.submitZipCode}>
              <label>Zip Code</label>
              <input
                type="input"
                name="zipcode"
                value={this.zipcode}
               />
              <button type="submit" className='btn btn-success'>Submit</button>
            </form>
            </div>
        </div>
      );
    }
  }
  
  export default ZipCode;
  
• keydown event multiple key hold odd behavior

  I have been running the following code using es6 babel on chrome:

  window.hold = [];
  window.addEventListener('keydown', (e) => {
    if (!window.hold.includes(e.key)) {
      setTimeout(() => {
        console.log("> - " + e.key);
        window.hold.push(e.key);
      }, 0);
    } else { e.preventDefault(); }
  });
  
  window.addEventListener('keyup', (e) => {
    setTimeout(() => {
      console.log("< - " + e.key);
      window.hold.splice(window.hold.indexOf(e.key), 1);
      e.preventDefault();
    }, 0);
  });
  

  If I hold ASDZ on the keyboard, it doesn't log the Z, but if I hold ASDK, it logs everything as it should, does anyone know why this is happening?
• Bind onClick when using higher order component

  Probably a newb-ish question. I'm new to react.

  Following some blog posts and such, I was able to build a page that higher order components and componentDidMount to load data from an API and render it to the page. It works great and the code looks clean, I can't figure out though, how to pass some kind of onClick through the higher order component, ultimately I'd like to move the guts of the fetch into a function that can be called by both componentDidMount as well as <Button onClick={}>Reload</Button>. Halp pls

  import React, { Component } from 'react';
  import {Button, CardColumns, Card, CardHeader, CardBody} from 'reactstrap';
  
  const API = 'http://localhost:3000/';
  const DEFAULT_QUERY = 'endpoint';
  
  const withFetching = (url) => (Comp) =>
    class WithFetching extends Component {
      constructor(props) {
        super(props);
  
        this.state = {
          data: {},
          isLoading: false,
          error: null,
        };
  
        // Goes here?
        this.onClick = () => {
          console.log("Handled!");
        };
      }
  
      componentDidMount() {
        this.setState({ isLoading: true });
  
        fetch(url)
          .then(response => {
            if (response.ok) {
              return response.json();
            } else {
              throw new Error('Something went wrong ...');
            }
          })
          .then(data => this.setState({ data, isLoading: false }))
          .catch(error => this.setState({ error, isLoading: false }));
      }
  
      // Or here maybe??
      this.onClick = () => {
        console.log("Handled!");
      };
  
      render() {
        // How do I pass it in?
        return <Comp { ...this.props } { ...this.state } onClick={this.onClick} />
      }
    }
  
  // How do I tell this component to expect it to recieve the handler?
  const App = ({ data, isLoading, error }) => {
    const hits = data.hits || [];
    console.log(data);
  
    if (error) {
      return <p>{error.message}</p>;
    }
  
    if (isLoading) {
      return <p>Loading ...</p>;
    }
  
    return (
      <div className="animated fadeIn">
        <CardColumns className="cols-2">
          <Card>
            <CardHeader>
              API Card!
              <div className="card-actions">
              </div>
            </CardHeader>
            <CardBody>
              {hits.map(hit =>
                <div key={hit.foo}>
                  <h3>{hit.foo}</h3>
                  _____
                </div>
              )}
  
              <Button onClick={props.onClick}>Launch demo modal</Button>
  
            </CardBody>
          </Card>
        </CardColumns>
      </div>
    );
  }
  
  export default withFetching(API + DEFAULT_QUERY)(App);
  

  Here is the blog post that led me to the architecture I'm using:

  Edit: I can create a function outside the class so that it is available everywhere, but the reason I originally wanted to leave it in was so that I could actually alter the state and re-render the card with the new data. Trying to figure out the proper use of bind() to make that work... JS makes me feel so dumb sometimes :p
• Style individual Picker.Item in React Native

  Is there any way to style individual Picker.Items? Other than the text color?

  Also, somewhat related, What props will a Picker.Item take? I know they'll take "key", "value", "label" and "color". But are there any others?

  I'm trying to style one of the Picker.Item's in my Picker component a different way than the rest of the Picker.Items in that Picker.

  Specifically I'm trying to modify the fontWeight, but I haven't been able to change any of the styling except for the color of the text with that color property.

  I know you can use itemStyle as a prop for the Picker component to style all of the items, but what if you want one of them to look a little different than the others? Is there a way to do that?

  <Picker
    style={{height: 130, width: 130}}
    selectedValue={this.state.day}
    itemStyle={{height: 130, fontFamily: 'Rubik-Regular'}}
    onValueChange={(itemValue, itemIndex) => this.setState({day: itemValue})}
  >
    <Picker.Item label="Day" value={-1} color='red'/>
    { validDays.map((i) => ( <Picker.Item key={i} label={i.toString()} value={i} /> )) }
  </Picker>
  

  Trying to change what that first Picker.Item (label="Day") looks like. I tried messing with style prop with no success:

  <Picker.Item label="Day" value={-1} style={{ color: 'red'}}/>
  

  Also tried messing with giving label a Text component like this:

  <Picker.Item label={(<Text>Hello</Text>)} value={-1}/>
  

  That wouldn't render at all. Threw an error.

  Also tried:

  <Picker.Item label="" value={-1} color='red'><Text>Hello</Text></Picker.Item>
  
• How to force click button in React JSX via scripts?

  Assuming I have a button, I have searched all of the web, .click() function does not work for me, I really do need to call the button click just after I press the button so it will click itself once more (double-click). Thanks for the help!

  <button  id='Button1' className="btn btn-primary btn-block btn-signin" onClick={() => {... // the magic code goes here}}
  
• Differences between curlybraces and parentheses wrapping in React or JSX

  Why in the start snippet below, the const user are wrapped in curly braces and the const element are wrapped in parentheses?

  function formatName(user) {
    return user.firstName + ' ' + user.lastName;
  }
  
  const user = {
    firstName: 'Harper',
    lastName: 'Perez'
  };
  
  const element = (
    <h1>
      Hello, {formatName(user)}!
    </h1>
  );
  
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
  
• Conditionally render content from API response in Reactjs component

  I make an API request and get a response (news articles) where I would like to render a few items from the response. eg (article title, article description etc)

  I store the response in state, and state by default is null.

  I would like to have logic that allows me to render these items in an li tag, I understand to do this through the .map function but I'm not sure where and how to add the logic to get my desired outcome.

  I've attempted a few things with a ternary operation but I can't seem to implement it without errors and/or incorrect placement.

  I would render these items in the ul of the ArticleSilo

  Here is my component with some logic I attempted.

  import React, { Component } from "react";
  
  import classes from "./News.css";
  
  import Axios from "axios";
  import Aux from "../../hoc/Aux";
  
  class News extends Component {
    state = {
      articles: null,
      tell: false
    };
  
    clickHandler = e => {
      Axios.get(
        "https://newsapi.org/v2/top-headlines?sources=" +
          e.target.getAttribute("source-link") +
          "&apiKey=e5da89b57ee347a1a1da306427dc5fa7"
      )
        .then(res => {
          this.setState({ articles: res.data.articles });
        })
        .catch(err => {
          console.log(err);
        });
    };
  
    render() {
      let articles = this.state.articles.map(aKey => {
        let title = aKey.title;
        let desc = aKey.description;
        <li>
          <p>Title: {title}</p>
          <p>Description: {desc}</p>
        </li>;
      });
  
      return (
        <Aux>
          <div className={classes.SidePanel}>
            <div className={classes.Heading}>News Sources</div>
  
            <ul className={classes.List}>
              <li onClick={this.clickHandler} source-link="polygon">
                Polygon
              </li>
              <li onClick={this.clickHandler} source-link="tech-rader">
                TechRadar
              </li>
              <li onClick={this.clickHandler} source-link="hacker-news">
                Hacker News
              </li>
              <li onClick={this.clickHandler} source-link="national-geographic">
                National Geographic
              </li>
              <li onClick={this.clickHandler} source-link="ars-technica">
                Ars Technica
              </li>
              <li onClick={this.clickHandler} source-link="breitbart-news">
                Breitbart News
              </li>
              <li onClick={this.clickHandler} source-link="crypto-coins-news">
                Crypto Coins News
              </li>
              <li onClick={this.clickHandler} source-link="the-verge">
                The Verge
              </li>
              <li onClick={this.clickHandler} source-link="the-next-web">
                The Next Web
              </li>
            </ul>
          </div>
  
          <div className={classes.ArticleSilo}>
            <ul>{articles}</ul>
          </div>
        </Aux>
      );
    }
  }
  
  export default News;
• how to use for loop with JSX elements to print content of collection into multiple <Text> tags in React Native?

  Basically I want to achieve the topology below within React Native render():

  <View>
     <Text>collection.key1</Text>
     <Text>collection.key2</Text>
     <Text>collection.key3</Text>
                 .
                 .
                 .
     <Text>collection.keyN</Text>
  </View>
  

  But I struggle with using for loop with JSX tags since I'm very new to JSX. Here's my code that's not working to give you more idea of what I'm trying to achieve:

  collectionToView(collection, keys)
  {
    let rows = [];
    for (key in keys)
    {
        rows.push(<Text> key + ": " + collection[key] </Text>);
    }
    return rows;
  }
  

  and later inside a scrollView I would like to render it like to render it like this somehow:

  <View>
     {this.collectionToView(userData, {'serial','product_id','product_name','status'})}
  </View>
  

  Can anyone show me how to achieve this in React Native?