前提・実現したいこと
React.jsにて、検索抽出のファンクションを作っております。
初心者なので、わからないことだらけなのですが、mapがundefinedのerrorになっており、原因がわかりません。
何かヒントか、エラーを探すアイディアがあれば教えていただきたいです。。。
発生している問題・エラーメッセージ
Uncaught TypeError: Cannot read property 'map' of undefined
<button className="close-button" data-close aria-label="Close modal" type="button">
該当のソースコード
import React, { Component } from 'react'; import { render } from 'react-dom'; /* Styleguide Application */ class Search extends React.Component { constructor(props) { super(props); this.state = { textLists: props.textLists, search:"", show:false, }; this.handleClick = this.handleClick.bind(this); } handleShow(){ this.setState({ show:!this.state.show }) } handleSearch(e) { var obj = {}; obj[e.target.name] = e.target.value this.setState(obj); } handleClick() { const _keyword = document.getElementsByClassName('_keyword')[0].value; const _newTextLists = this.props.textLists.filter((textLists) => ( textLists.name.toLowerCase().indexOf(_keyword) >= 0 ).bind(this)); this.setState({ textLists:_newTextLists }); } componentDidMount() { $(document).foundation(); } render() { const {textList} = this.props; var {search} = this.state; const renderitem = (text) => ( <div className="margin-bottom-4 small-6 medium-4 large-2 columns card-wrap"> <a className="itemLink" data-open="Style-Modal"> <div className="radius bordered shadow card"> <img className="style-tmb-s" src={text.thumbnail} /> <div className="card-section"> <p>{text.name}</p> </div> </div> </a> </div> ); const render = (text) => ( <div> <div className="tabs-panel is-active" id="panel1"> <pre> <code> {text.sourceTypeA} </code> </pre> </div> <div className="tabs-panel" id="panel2"> <pre> <code> {text.sourceTypeB} </code> </pre> </div> </div> ); const renderimages = (text) => ( <div> <img src={text.image} /> </div> ); return ( <div className="wrap"> <div className="large-12.columns header"> <div className="row head-nav" id="responsive-menu"> <div className="small-7 large-7 columns search-rap"> <div className="small-12 large-12 columns" id="header"> <div className="input-group"> <input type="text" className="form-control _keyword" onChange={this.handleSearch.bind(this)} value={this.state.search} name="search" placeholder="what are you searching?" autoComplete="on" list="stylesuggest"/> <datalist id="stylesuggest"> <option value="icon"/> <option value="images"/> <option value="pager"/> <option value="pager"/> <option value="pager"/> <option value="check box"/> </datalist> <button className="btn btn-default input-group-btn" type="button" onClick={this.handleShow.bind(this)}> <i className="fi-magnifying-glass"></i> </button> </div> </div> </div> </div> </div> <div className="main-wrap"> <div className="result-wrap"> <div className="large-12.columns"> <div className="small-9 large-10 columns padding-top-3 result-wrap"> <div className="reveal row" id="Style-Modal" data-reveal> <div className="Style-Modal-inner columns small-12"> <ul className="tabs" data-tabs id="example-tabs"> <li className="tabs-title is-active"> <a href="#panel1" aria-selected="true">source A</a></li> <li className="tabs-title"><a data-tabs-target="panel2" href="#panel2">source B</a></li> </ul> <div className="tabs-content" data-tabs-content="example-tabs"> {this.props.textList.map(render)} </div> <button className="close-button" data-close aria-label="Close modal" type="button"> </button> </div> </div> <div className="row"> <div className="margin-bottom-1 small-12 medium-12 large-12 columns title-wrap"> <i className="fi-magnifying-glass"></i> <h3 className="title">Style</h3> </div> </div> <div className="row items-wrap"> {this.state.show ?this.props.textList.filter(function(t){ return(search==t.name) }) .map(renderimages)&&this.props.textList.filter(function(t){ return(search==t.name) }) .map(renderitem) :null } </div> </div> </div> </div> </div> </div> ); } } export default Search;
追加のコード
lang
1import React, { Component } from 'react'; 2//import Main from './Main'; 3import Search from './Search'; 4 5/* Styleguide Application */ 6 7class StyleguideApplication extends React.Component { 8 9 constructor(props) { 10 super(props); 11 this.state = { 12 textLists: [ 13 { thumbnail: 'images/sample1.png', name:'icon', sourceTypeA:'sourceA', sourceTypeB:'sourceB', image: 'images/sample1.png'}, 14 { thumbnail: 'images/sample2.png', name:'navigation', sourceTypeA:'sourceA', sourceTypeB:'sourceB', image: 'images/sample2.png'}, 15 { thumbnail: 'images/sample3.png', name:'images', sourceTypeA:'sourceA', sourceTypeB:'sourceB', image: 'images/sample3.png'}, 16 { thumbnail: 'images/sample4.png', name:'pager', sourceTypeA:'sourceA', sourceTypeB:'sourceB', image: 'images/sample4.png'}, 17 { thumbnail: 'images/sample5.png', name:'check box', sourceTypeA:'sourceA', sourceTypeB:'sourceB', image: 'images/sample5.png'}, 18 ] 19 }; 20 } 21 22 render() { 23 24 return ( 25 <div className="wrap"> 26 <div className="row"> 27 <Search textlist={this.state.textLists} /> 28 </div> 29 </div> 30 ); 31 } 32} 33 34export default StyleguideApplication; 35
回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。