React JSX: How to set props to placeholder attribute

Question

I have an input tag and I'm trying to set the placeholder's contents to the component's props. After compiling JSX and running it in the browser, the placeholder does not show up at all. It's also not throwing any errors. How can I do this?

<input type="text" onChange={this.props.handleChange} placeholder={this.props.name} />

Answer 1

There seems to be nothing wrong with this code in the child component. The placeholder should show up just fine, as you implemented it.

Here is how I have it set in the parent:

import React, { Component } from 'react';
import Title from'./Title';
import TestList from'./TestList';

export default class Layout extends Component {
    constructor() {
        super();
        this.state = {
          title: 'Moving Focus with arrow keys.',
          placeholder:'Search for something...'
        };
    }

    render() {    
        return (
            <div >
                <Title title={ this.state.title } />
                <p>{ this.getVal() }</p>
                <TestList placeholderText={this.state.placeholder} />
            </div>
        );
    }
}

Here is how I display it in the child:

import React, { Component } from 'react';

export default class TestInput extends Component {
    constructor(props){
        super(props);
    };

    render() {
        return (
            <div>
              <input type="search" placeholder={this.props.placeholderText} />
            );
        } 
    }
}

Bit of a late reply but hope it helps! :-)

Answer 2

Another answer would be:: Parent Component

import React, { Component } from 'react';
import TextView from'./TextView';

export default class DummyComponent extends Component {
    constructor() {
        super();
        this.state = {

        };
    }

    render() {    
        return <TextView placeholder = {"This is placeholder"} />
    }
}

Child Componet

import React, { Component } from 'react';

export default class TextView extends Component {
    constructor(props){
        super(props);
    };

    render() {
        const { placeholder } = this.props;
        return <input type="text" placeholder = {placeholder} />
    }
}